Angular2双方向バインドオプションが更新されない

Question

[ngValue]を使用して、コンポーネントのPersonプロパティにバインドされた選択リストがあります。選択を変更すると、underyling selectedPersonプロパティが期待通りに更新されます。ただし、選択した人物をコードで変更すると、初期化時に選択された人物にはデフォルトが適用されず、更新もされません。

私が紛失しているものについては、何か助けていただければ幸いです。ここに私のコードは...

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

Answer 1

だ問題は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