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上選擇沒有顯示初始，默認值

回答

相關問題