我有以下 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
最佳答案
尝试将值存储在另一个服务中,然后在加载应用程序时将其默认为该值时,您将面临的问题是,从 Angular 来看,它们并没有指向内存中完全相同的对象.
您需要按如下方式稍微更改 ngOnInit 方法。
- 根据 BannerId 等键在您存储的横幅数组中找到对象的索引。
- 之后,您可以使用相同的方式设置所选选项 this.selectedBanner = this.banners[bannerIdIndex].
通过这样做,您将能够获得指向您在 ngFor 中使用的列表中正确对象的 Angular
关于angular - 选择上的 ngModel 不显示初始值、默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44292069/