javascript - Angular2中的选择问题

Question

请查看我创建的 plunker 代码。当我点击切换显示按钮两次时，我应该获得选定的项目。

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

使用此模板和 changeShow()功能:

@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
  ...
}

请注意，当您单击该按钮(并且调用 changeShow() 方法)时，您将重新创建数组 <select>/<option> s 指向。

自 selectedDeviceObj属性指向前一个 deviceObjects 的元素，<select>现在没有选择任何值。

这可能看起来很奇怪，但更改检测使用严格相等或对象标识 ( === ) 来比较对象。因此{name: 2}原文deviceObjects是不相同{name: 2}在新deviceObjects (它们可能具有相同的值，但它们不是完全相同的对象)。

所以，如果删除 this.deviceObjects = ...上线changeShow() ，<select>应保留其选择:

@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;
  }
  ...
}

参见demo plunker here .

<小时/>

更新(根据评论):

如果您确实需要在每次单击时更改整个数组，则可以尝试更新 selectedDeviceObj每次点击时:

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)
                             );
  }
  ...
}

参见demo plunker here .

updateSelectedDeviceObj()上面的函数通过 JSON 字符串来比较对象。 Array.prototype.find() 返回数组中满足条件(即“JSON 相等”)的第一个对象。

注意为什么它有效:{name: 2} === {name: 2}是 false (它们不是相同对象，但JSON.stringify({name: 2}) === JSON.stringify({name: 2})是true(它们的JSON等效字符串是相同的)。

如果您有另一种方法来判断对象是否相同(也许是类似 ID 的属性)，那么一定要使用它。