Angular2双向绑定选择选项不更新
我有一个选择列表绑定到我的组件上的人物业使用[ngValue]。当我改变选择时,undererling selectedPerson属性按预期更新。但是,select在初始化时不会对选定的人员进行默认设置,如果我更改了代码中的选定人员,它也不会更新。Angular2双向绑定选择选项不更新
任何帮助到我失踪将不胜感激。这里是我的代码...
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 {}
...这是一个Plunker http://plnkr.co/edit/ag94mZO9Zggg1kZx8jJV
的问题是,通过使用ngValue
,该select
预计相同的参考,而不仅仅是一个外观类似的对象。
你可以像这样添加一个方法来选择按名称:
public selectByName(name: string) {
this.selectedPerson = this.people.find(person => person.name === name);
}
然后调用它在你的ngOnInit()
:
this.selectByName("Mary");
// or this.selectedPerson = this.people[2];
而且在selectJane()
:
public selectJane(){
this.selectByName("Jane");
}
您的已更新Plunker
谢谢。这清楚地解释了问题并给了我一个解决方案。必须将selectedPerson对象的引用更新为与列表中的引用相同,不过感觉有点痛苦,但实际上,这些值将来自单独的http调用。因此,我需要包括一个额外的步骤来对齐应用中每个选择列表的引用。我可以绑定到ID,而不是那将工作,但这将意味着是和名称会失去同步;这对于试图调试其他问题的开发人员来说可能会非常困惑。 – Nemir
想想这个更多,不应该''[attr.selected] =“p.personId === selectedPerson?.personId?true:null”'处理保持正确的'
'selected'属性不适用于'ngModel'。 – rinukkusu
可能重复的[角2 - 绑定对象下拉并选择基于事件的值](http://*.com/questions/39105905/angular-2-bind-object-to-dropdown-并选择基于事件的值) –