Anglar: values not updating after assign to select-CodePudding

I have a <select> backed by a formcontrol and filled with an array of objects. After a select it will fill a <table> with the fields of the object.

All fine and dandy.

relevant html:

<form>
  <div>
    <select
      [formControl]="selectedLocation"
      (change)="changeSelectedLocation($event)"
    >
      <option [ngValue]="null" disabled>Select Location</option>
      <option *ngFor="let location of locations" [ngValue]="location">
        {{ location.name }}
      </option>
    </select>
  </div>

  <br />
  Location Details
  <br />
  <br />
  <table >
    <thead>
      <tr>
        <th colspan="2">{{ selectedLocation.value.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Street</td>
        <td>{{ selectedLocation.value.streetName }}</td>
      </tr>
      <tr>
        <td>Number</td>
        <td>{{ selectedLocation.value.houseNumber }}</td>
      </tr>
      <tr>
        <td>Zip</td>
        <td>{{ selectedLocation.value.zipcode }}</td>
      </tr>
      <tr>
        <td>City</td>
        <td>{{ selectedLocation.value.city }}</td>
      </tr>
    </tbody>
  </table>
</form>

typescript:

export class LocationSelectorComponent implements OnInit {
  console = console;
  locations: MyLocation[] | undefined;
  currentLocation!: MyLocation;
  selectedLocation = new FormControl();

  constructor(private locationService: MyLocationService) {}

  ngOnInit() {
    this.locations = this.locationService.getLocations();
    this.getCurrentLocationFromStore();
    console.log('current location loaded is: '   this.currentLocation.name);
    this.selectedLocation.setValue(this.currentLocation);
  }

  changeSelectedLocation(e: any) {
    this.currentLocation = e.target.value;
    localStorage.setItem(
      'currentLocation',
      JSON.stringify(this.currentLocation)
    );
    console.log('event is: '   this.selectedLocation.value.name);
  }

  getCurrentLocationFromStore() {
    const retrievedObject = localStorage.getItem('currentLocation');
    if (retrievedObject != null)
      this.currentLocation = JSON.parse(retrievedObject);
  }
}

Now I want the save the last selected object in local storage and read it back later when I revisit the page. Storing and retrieving work fine. But after setting the <select> to the retrieved object the dropdown is updated, but the table is not.

Could not find a minimal example just doing this and I'm probably making some rookie mistakes. Can someone point me in the right direction?

stackbliz: project: https://stackblitz.com/edit/angular-ivy-hzpdlf?file=src/app/component/location-selector/location-selector.component.ts

application: https://angular-ivy-hzpdlf.stackblitz.io

CodePudding user response：

Here is a working example https://stackblitz.com/edit/angular-ivy-mp8nou?file=src/app/component/location-selector/location-selector.component.ts

The problem was a redundant roundtrip with currentLocation and not being in sync anymore. I removed it and just worked with the control.