angular - 选择上的 ngModel 不显示初始值、默认值

Question

我有以下 Angular 代码:

comp.html

<select [(ngModel)]="selectedBanner" (change)="onBannerChange()">
                    <option *ngFor="let banner of banners" 
                    [ngValue]="banner">{{banner.BannerDesc}}</option>

                </select>

comp.ts

    public banners: any[] = [
        {BannerId: 1, BannerDesc: 'AAAA'},
        {BannerId: 2, BannerDesc: 'BBBB'},
        {BannerId: 3, BannerDesc: 'CCCC'},
        {BannerId: 4, BannerDesc: 'DDDD'},
    ];
    public selectedBanner: any = {BannerId: 3, BannerDesc: 'CCCC'};
    onBannerChange() {
        console.log(this.selectedBanner);
    }

但是，在加载时，选择下拉列表始终为空白。只有当我改变时，它才会获得值(value)。如何在加载时设置默认值？

我正在使用 Angular 4.0.0

Answer 1

尝试将值存储在另一个服务中，然后在加载应用程序时将其默认为该值时，您将面临的问题是，从 Angular 来看，它们并没有指向内存中完全相同的对象.

您需要按如下方式稍微更改 ngOnInit 方法。

1. 根据 BannerId 等键在您存储的横幅数组中找到对象的索引。
2. 之后，您可以使用相同的方式设置所选选项this.selectedBanner = this.banners[bannerIdIndex].

通过这样做，您将能够获得指向您在 ngFor 中使用的列表中正确对象的 Angular