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迭代数组/集合，相应地填充值和文本。在设置值以模仿HTTP API调用之前，我已经更新了模拟延迟3000ms的答案。

<强> 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应用程序出错。

希望这有帮助！

Answer 2

这有效：

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

在ng2中实现下拉列表的正确方法？

2 个答案: