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

来源

2016-09-28 Nemir

可能重复的[角2 - 绑定对象下拉并选择基于事件的值]（http://stackoverflow.com/questions/39105905/angular-2-bind-object-to-dropdown-并选择基于事件的值） –

的问题是，通过使用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

来源

2016-09-28 11:11:50 rinukkusu

谢谢。这清楚地解释了问题并给了我一个解决方案。必须将selectedPerson对象的引用更新为与列表中的引用相同，不过感觉有点痛苦，但实际上，这些值将来自单独的http调用。因此，我需要包括一个额外的步骤来对齐应用中每个选择列表的引用。我可以绑定到ID，而不是那将工作，但这将意味着是和名称会失去同步;这对于试图调试其他问题的开发人员来说可能会非常困惑。 – Nemir

想想这个更多，不应该''[attr.selected] =“p.personId === selectedPerson？.personId？true：null”'处理保持正确的'

'selected'属性不适用于'ngModel'。 – rinukkusu

Angular2双向绑定选择选项不更新

回答

相关问题