Как заполнить выделенный выпадающий текст в угловых 4

Question

Я использую Angular 4, чтобы получить страну, используя select.Для просмотра и создания страницы выпадающий работает нормально.Но во время обновления выбранный выпадающий текст не отображается.

client.ts :

export class client {
 country: Country;
}

client.html :

    <select name="country" class="form-control m-input"  [(ngModel)]="client.country">
    <option *ngFor='let country of countrySource' [ngValue]="country">
    {{country.countryName}}
    </option>
    </select>

component.ts :

   import { client } from "./models/client";

    export class MyClientsComponent implements OnInit, AfterViewInit {
           client = new client();

            getCountries() {
                    this._myclientsService.getCountry()
                        .subscribe(
                        res => this.onGetClientSuccess(res),
                        error => this.onGetClientFail(error));
                }
                onGetClientSuccess(res) {
                    this.countrySource = res.countries;
                }

                onGetClientFail(error) {
                    alert("error");
                }

    }

Answer 1

Я решил свою проблему, используя директиву CompareWith для сравнения вариантов выбора.

sample.html <select [compareWith]="compareFn" name="country" [(ngModel)]="client.country"> <option *ngFor='let country of countrySource' [ngValue]="country"> {{country.countryName}} </option </select>

sample.ts compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.countryid === c2.countryid : c1 === c2; }