在angular2中选择的问题

Question

Please see my plunker code i have created. when i click toggle show button 2 times i should get selected item.

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div *ngIf="show"><select [(ngModel)]="selectedDeviceObj"  name="sel3">
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
  </select></div>
  {{selectedDeviceObj | json}}

  <br/><br/><br/>
  <button (click)="changeShow()">toggle show</button>
  `
  //directives: []
})
export class AppComponent {
  changeShow(){  
  this.deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
    this.show=!this.show;
  }

  show=true;
  title = "Angular 2 RC.4 - select";
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  //constructor() { console.clear(); }
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
  }
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...

  }
}

Answer 1

With this template and changeShow() function:

@Component({
  ...
  template: `<div *ngIf="show"><select [(ngModel)]="selectedDeviceObj"  name="sel3">
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
  </select></div>
  ...
  <button (click)="changeShow()">toggle show</button>
  `
  ...
})
export class AppComponent {
  changeShow(){  
    this.deviceObjects = [{name: 1}, {name: 2}, {name: 3}]; // <---- recreating the array!
    this.show=!this.show;
  }
  ...
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}]; // <--- the "old" array
  selectedDeviceObj = this.deviceObjects[1]; // <--- points to an object of the "old" array
  ...
}

Notice that when you click the button (and changeShow() method is called), you are recreating the array the <select>/<option> s point to.

Since the selectedDeviceObj property pointed to an element of the previous deviceObjects , the <select> now has no value selected.

It may seem strange, but the change detection uses strict equality, or object identity, ( === ) to compare the objects. Thus the {name: 2} in the original deviceObjects is not the same {name: 2} in the new deviceObjects (they may have the same values, but they are not the exactly same object).

So, if you remove the this.deviceObjects = ... line on changeShow() , the <select> should keep its selection:

@Component({
  ...
  template: `<div *ngIf="show"><select [(ngModel)]="selectedDeviceObj"  name="sel3">
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
  </select></div>
  ...
  <button (click)="changeShow()">toggle show</button>
  `
  ...
})
export class AppComponent {
  changeShow(){  
    this.show=!this.show;
  }
  ...
}

See demo plunker here .

---

Update (per comments):

If you really need to change the whole array at each click, you can then try to update the selectedDeviceObj at each click as well:

export class AppComponent {
  changeShow(){  
    this.deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
    this.show=!this.show;
    this.updateSelectedDeviceObj();
  }
  updateSelectedDeviceObj() {
    // tries to find in the new array (this.deviceObjects) if there's any object equal to
    // the this.selectedDeviceObj. If so, sets it as this.selectedDeviceObj.

    // Uses JSON.stringify() to tell if they are the same. If you have a simpler way to see
    // if the objects are the same (an ID-like property, maybe), then definitely use it.
    let jsonSelectedDeviceObj = JSON.stringify(this.selectedDeviceObj);
    this.selectedDeviceObj =
      this.deviceObjects.find(deviceObject =>
                                  jsonSelectedDeviceObj === JSON.stringify(deviceObject)
                             );
  }
  ...
}

See demo plunker here .

The updateSelectedDeviceObj() function above compares the objects by their JSON string. Array.prototype.find() returns the first object in the array that satisfy the criteria (which is "JSON equality").

Notice why this works: {name: 2} === {name: 2} is false (they are not the same object, but JSON.stringify({name: 2}) === JSON.stringify({name: 2}) is true (their JSON equivalent string is the same).

If you have another way to tell if the objects are the same (an ID-like property, maybe), then definitely use it.