在ng2中實現下拉菜單的正確方法？

在ng2中實現下拉菜單的正確方法是什麼？我做了一些谷歌搜索，但我沒有發現很多一致性。在ng2中實現下拉菜單的正確方法？

我的search.component.ts有一個通過ngOnInit（）設置的searchMetadata屬性。

searchMetadata.Authors看起來像[{ID = 1，值= 「鮑勃史密斯」}，{ID = 2，值= 「瑪麗·瓊斯」}]

最終NG2下拉應該是這樣的：

<select #ddlAuthor (change)="updateSearchResults()"> 
    <option value="1">John Smith</option> 
    <option value="2">Jane Doe</option> 
    <option value="3">John Denver</option> 
</select>

在component.html中實現ng2的正確方法是什麼？

來源

2017-08-02 user8334943

您可以使用*ngFor來遍歷數組/集合來相應地填充值和文本。我已經更新了模擬延遲3000ms的答案，然後將這些值設置爲模擬HTTP API調用。

HTML：

<select #ddlAuthor (change)="updateSearchResults($event)"> 
    <option *ngFor="let option of options" [value]="option.Id">{{option.Value}}</option> 
</select>

TS：

export class App { 
    options: any[]; 

    constructor() {} 

    ngOnInit() { 
    // simulated delay for API call 
    Observable 
     .of([ 
     {Id:1, Value:"Bob Smith"}, 
     {Id:2, Value:"Mary Jones"} 
     ]).delay(3000).subscribe(values => { 
     this.options = values; 
     }); 
    } 

    updateSearchResults($event) { 
    console.log($event); 
    } 
}

這裏是一個展示plunker的功能。

注意：您在問題[{Id=1, Value="Bob Smith"},{Id=2, Value="Mary Jones"}]中引用的數組是無效的JavaScript語法。對象的結構爲{ key: value }，它需要是鍵和值之間的冒號「：」而不是等號「=」，如C# Object Initialization。擁有「=」會導致Angular應用程序出錯。

希望有幫助！

來源

2017-08-02 17:33:38

此作品：

<select (change)="updateSearchResults()" #ddlAuthor> 
    <option *ngFor="let author of blogSearchMetadata.Authors">{{author.Value}}</option> 
</select>

來源

2017-08-02 17:34:06 user8334943

在ng2中實現下拉菜單的正確方法？

回答

相關問題