angular - Angular2 Zwei-Wege-Bindung zu Auswahlelement wird nicht aktualisiert

Ich habe eine Auswahlliste, die an eine Person-Eigenschaft in meiner Komponente mit [ngValue] gebunden ist. Wenn ich die Auswahl ändere, wird die zugrunde liegende selectedPerson-Eigenschaft wie erwartet aktualisiert. Allerdings wird die Auswahl beim Initialisieren nicht standardmäßig auf die ausgewählte Person gesetzt, noch wird sie aktualisiert, wenn ich die ausgewählte Person im Code ändere.

Jegliche Hilfe zu dem, was mir fehlt, wäre sehr dankbar. Hier ist mein 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 {}

...und hier ist ein Plunker http://plnkr.co/edit/ag94mZO9Zggg1kZx8jJV

Antwort #1

Das Problem ist, dass beim Verwenden von ngValue das select dieselbe Referenz erwartet, nicht nur ein ähnlich aussehendes Objekt.

Sie könnten eine Methode hinzufügen, um nach Name wie folgt auszuwählen:

public selectByName(name: string) {
   this.selectedPerson = this.people.find(person => person.name === name);
}

Und rufen Sie es dann in Ihrem ngOnInit() auf:

this.selectByName("Mary");
// or this.selectedPerson = this.people[2];

Und in selectJane():

public selectJane(){
    this.selectByName("Jane");
}

Ihr aktualisierter Plunker