Ustawianie wybranej opcji sterowania select w modelu sterowanym Angular 2

Question

Przebadałem wiele podobnych istniejących odpowiedzi na SO i gdzie indziej, ale nie mogę znaleźć rozwiązania tego problemu.

Używam podejścia opartego na modelu w Angular 2 do budowania mojego formularza, który jest zarówno formą dodawania, jak i edycji. W trybie edycji wartości są wypełniane danymi pobranymi z usługi: ten aspekt jest w porządku, ponieważ wszystkie proste wejścia tekstowe są prawidłowo powiązane.

Jedną z właściwości jest „Kraj” i jest to obiekt w następujący sposób:

export class Country {id: number; name: string;} 

Chcę powiązać to do wyboru sterowania, który będzie miał listę krajów dostępnych, a jeden z model jest wypełniany po załadowaniu formularza. Chcę, aby wartość powiązania była obiektem kraju, a nie tylko identyfikatorem.

Oto html z wyboru sterowania:

<select class="form-control" id="country" formControlName="country"> 
      <option value="default">--Select a country--</option> 
      <option *ngFor="let c of countries" [value]="c">{{c.name}}  </option> 
</select> 

A oto gdzie staram się zapełnić wartość z klasy komponent:

(<FormControl>this.personForm.controls['country']) 
.setValue(this.person.country, { onlySelf: true }); 

Ale nie ma wybrana opcja gdy ładuje się strona, mimo że konsola potwierdza, że ​​this.person.country istnieje i jest wypełniony poprawnym obiektem.

Mogę to zrobić działając z ids: zmieniając na [wartość] = "c.id" w widoku i dołączając .id w klasie, a następnie działa, że ​​wybrana jest właściwa opcja. Problem polega na tym, że wybranie nie emituje już obiektu dla właściwości kraju, tylko identyfikator. Próbowałem zmienić [wartość] na [ngValue] i uzyskać ten sam wynik. Dodałem nawet [ngModel] = "country" do elementu select, co też nie pomogło.

Byłbym wdzięczny za każdą pomoc.

Answer 1

Problem jest najbardziej prawdopodobny, ponieważ this.person.country to nie to samo country jak w twojej tablicy countries.

Jeśli chcemy, aby im to samo możemy jawnie subskrybować valueChanges do wyboru sterowania lub wiązać [(ngModel)] do person.country:

zapisać się do zmian

kodowych

this.countryForm.controls['country'].valueChanges.subscribe(country => 
    this.person.country = country; 
); 

// initialize by finding the correct country object (this will overwrite the person's country object) 
this.countryForm.controls['country'].setValue(countries.filter(c => c.id === person.country.id)); 

Szablon

ngModel wiążą

Musimy jeszcze zrobić mecz obiektów (por strategię kątowe 2 wykorzystuje który jest naprawdę co używa JS) kod

this.person.country = this.countries.filter(c => c.id === this.person.country.id)[0]; 

szablonu

<select class="form-control" id="country" formControlName="country" [(ngModel)]="person.country"> 
    <option value="default">--Select a country--</option> 
    <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option> 
</select> 

ngModel Plunker:http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview

subskrypcja Plunker: http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info