ngModel上选择没有显示初始，默认值

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

然而，在负载下，选择下拉总是空白。只有当我改变时，它才会获得价值。如何设置加载时的默认值？

我使用的角度4.0.0

来源

2017-05-31 Deepak

角不能没有提到连接一个独立的对象到阵列。只需在你的oninit中做：'this.selectedBanner = this.banners [2]'并在你的组件中声明'public selectedBanner = {}' – Alex

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

您将需要稍微改变你的ngOnInit方法如下。

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

通过这样做，你将能够获得角指向您正在使用您的ngFor这里

来源

2017-05-31 19:02:17 jLee

完美，正是我想要的。谢谢。 – Deepak

意义重大，但我需要听到你说的，@ jLee;像魅力一样工作。谢谢。 – Draghon

试试这个：

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设置输入属性后设置组件。

来源

2017-05-31 18:40:59

精细的答案，而只是在此抛出，因为我们发现这个列表中选择正确的对象selectedBanner将是一个全局变量。您可以从阵列基于你的对象做这样jLee建议，也可以简单地使用find()，在那里你会分配（建立基准）的价值，所以：

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

来源

2017-05-31 19:51:36 Alex

ngModel上选择没有显示初始，默认值

回答

相关问题