select 上的 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);
    }

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

我正在使用 angular 4.0.0

Answer 1

试试这个：

import { Component, OnInit} from '@angular/core';
  public banners: any[];

  ngOnInit() {
     banners = [
        {BannerId: 1, BannerDesc: 'AAAA'},
        {BannerId: 2, BannerDesc: 'BBBB'},
        {BannerId: 3, BannerDesc: 'CCCC'},
        {BannerId: 4, BannerDesc: 'DDDD'},
    ];

 }

使用 ngOnInit() 有两个主要原因：

在构造后不久执行复杂的初始化。在 Angular 设置输入属性后设置组件。

Answer 2

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

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

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

通过这样做，您将能够 angular 指向您在 ngFor

中使用的列表中的正确对象

Answer 3

这里的答案很好，但只是为了抛出这个，因为我们发现这个 selectedBanner 将是一个全局变量。你可以像 jLee 建议的那样做，也可以简单地使用 find()，你可以根据你的对象从数组中分配（创建引用）值，所以：

ngOnInit() {
  this.selectedBanner = this.banners.find(x => 
       x.BannerId == this.selectedBanner.BannerId)
}

Answer 4

同样重要的是，您分配给 ngModel 变量的初始值应该是一个数字。如果不是数字，则使用 parseInt(value);

select 上的 ngModel 未显示初始默认值

ngModel on select not showing initial, default value

select

ngmodel

angular