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

Question

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

我的search.component.ts具有searchMetadata屬性，該屬性通過ngOnInit（）進行設置。

searchMetadata.Authors類似於[{Id = 1，Value =“ Bob Smith”}，{Id = 2，Value =“ Mary Jones”}]

最終的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的正確方法是什么？

Answer 1

您可以使用*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);
  }
}

這是一個演示功能的插件 。

注意：您在問題[{Id=1, Value="Bob Smith"},{Id=2, Value="Mary Jones"}]引用的數組不是有效的JavaScript語法。 對象的結構為{ key: value } ，因此鍵和值之間應使用冒號“：”，而不是C＃對象初始化中的等號“ =”。 擁有“ =”會在Angular應用程序中導致錯誤。

希望有幫助！

Answer 2

這有效：

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