angular - ngModel on select 不显示初始值，默认值

Question

我有以下 Angular 代码：

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

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

您将需要稍微改变您的 ngOnInit 方法，如下所示。

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

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

Answer 2

试试这个：

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 3

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

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

Answer 4

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