typescript Angular2 双向绑定选择选项不更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39745629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 two-way binding to select option not updating
提问by Nemir
I have a select list that is bound to an Person property on my component using [ngValue]. When I change the select, the underyling selectedPerson property is updated as expected. However, the select does no default to the selected person on initialisation nor does it update if I change the selected person in code.
我有一个选择列表，它使用 [ngValue] 绑定到我的组件上的 Person 属性。当我更改选择时，底层 selectedPerson 属性会按预期更新。但是，选择不会在初始化时默认为选定的人，如果我在代码中更改选定的人，它也不会更新。
Any help into what I am missing would be greatly appreciated. Here's my code...
对我所缺少的任何帮助将不胜感激。这是我的代码...
import {Component, OnInit, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<form>
<select [(ngModel)]="selectedPerson"
name="selectedPerson">
<option [ngValue]="null">Please choose...</option>
<option *ngFor="let p of people"
[ngValue]="p"
[attr.selected]="p.personId === selectedPerson?.personId ? true : null ">{{p.name}}</option>
</select>
<p>The selected person is {{selectedPerson?.name}}</p>
<button type="button" (click)="selectJane()">Select Jane</button>
<button type="button" (click)="clearSelection()">Clear Selection</button>
</form>`,
})
export class App implements OnInit {
public ngOnInit() {
this.people = [
{ personId: 1, name: "Tom" },
{ personId: 2, name: "Mary" },
{ personId: 3, name: "Jane" }
]
this.selectedPerson = { personId: 2, name: "Mary" }
}
public people: Person[];
public selectedPerson: Person;
public selectJane(){
this.selectedPerson = { personId: 3, name: "Jane" }
}
public clearSelection(){
this.selectedPerson = null;
}
}
export class Person {
public personId: number;
public name: string;
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
...and here's a Plunker http://plnkr.co/edit/ag94mZO9Zggg1kZx8jJV
...这是一个Plunker http://plnkr.co/edit/ag94mZO9Zggg1kZx8jJV
回答by rinukkusu
The problem is, that by using ngValue, the selectexpects the same reference, not just a similar looking object.
问题是，通过使用ngValue，select期望相同的引用，而不仅仅是外观相似的对象。
You could add a method to select by name like this:
您可以添加一个方法来按名称进行选择，如下所示：
public selectByName(name: string) {
this.selectedPerson = this.people.find(person => person.name === name);
}
And then call it in your ngOnInit():
然后在您的ngOnInit()：
this.selectByName("Mary");
// or this.selectedPerson = this.people[2];
And in selectJane():
并在selectJane()：
public selectJane(){
this.selectByName("Jane");
}
Your updated Plunker
你更新的Plunker
