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

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

我正在使用angular 4.0.0

Answer 1

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

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

根据BannerId等键找到已存储的横幅数组中对象的索引。
之后，您可以使用相同的选项设置所选选项 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);

ngModel on select未显示初始值，默认值

4 个答案: