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; }

如何在角度4中填充选定的下拉文本

1 个答案: