选择时的 ngModel 不显示初始值、默认值

Question

我有以下角度代码：

comp.html

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

                </select>

比较

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

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

我正在使用角度 4.0.0

Answer 1

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

您需要对 ngOnInit 方法稍作修改，如下所示。

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

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