Angular2 select failed to set the default Value

Question

My select department template code looks like,

  <div class="form-group">
    <label class="control-label">Location</label>
    <select class="selectpicker" *ngIf="locations" data-style="btn btn-primary btn-round" title="Select A Location" 
    [(ngModel)]="selectedLocation"
    [ngModelOptions]="{standalone: true}">
        <option *ngFor="let loc of locations"
          [ngValue]="loc">
          {{loc.name}}
        </option>
    </select>
    <span *ngIf="!selectedLocation" class="help-block text-danger">
        You must select one Location.
    </span>
  </div>

This code is reponsible for getting the locations from server. I can manage to list these locations once the select dropdown is clicked.

select.ts

private selectedLocation: any = null;

ngOnInit() {
    this.buildForm();
    this.getLocations();
  }

setDefaultTypeAndLocation() {    
    for (let location of this.locations) {
      if (location.name === this.vehicle.location) {
        this.selectedLocation = location;
        break;
      }
    }
  }

  ngOnChanges() {
    console.log(this.vehicle);
    if (this.vehicle.type.key !== '' && this.vehicle.location) {
      this.setDefaultTypeAndLocation();
    }
    this.buildForm();
  }

getLocations() {
    this.locations = this.locationsService.locations;
    if (!this.locations) {
      this.locationsService.list()
        .subscribe(
          data => {
            this.locations = data;
          },
          error => {
            console.log('err in vehicle form getLocations method');
          }
        );
    } else {
    }
  }

On clicking the edit button on the parent component, corresponding vehicle object is passed to the child component which thereby initiates the ngOnChanges method.

See, this this.setDefaultTypeAndLocation(); invokes method setDefaultTypeAndLocation() which was used to set the default Location ( this.selectedLocation = location; ).

From this point, I properly updated the this.selectedLocation value. But on the View, the location I set previously wasn't shown as default Location.

Answer 1

Maybe your are not showing all code, but I don't see you ever calling the getLocations() method. This means that this.locations will always be an empty list, so no location can be set.

edit:

Instead of initializing your locations in ngOnInit , change your getLocations method to update locations when needed. Initializing in in ngOnInit won't work, since ngOnChanges is called BEFORE ngOnInit ( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html ).

See this code example:

  ngOnInit() {
    //do not initialize locations here
  }

  setDefaultTypeAndLocation() {
    //change this.location to this.getLocations()
    for (let location of this.getLocations()) { 
      if (location.name === this.vehicle.location) {
        this.selectedLocation = location;
        break;
      }
    }
  }

  getLocations() {
    // Add this check
    if (this.locations && this.locations.length > 0) return this.locations;

    this.locations = this.locationsService.locations;
    if (!this.locations) {
      this.locationsService.list()
        .subscribe(
        data => {
          this.locations = data;
        },
        error => {
          console.log('err in vehicle form getLocations method');
        }
        );
    } else {
    }
  }