ngOptions不起作用，即使使用基本示例

Question

我对Angular很陌生，有点不知所措。

据我了解，我有一个组件可以显示{{ this }}之类的数据，效果很好。现在，我要选择component.ts中的数据。它是一个字符串数组：

private strategies: string[] = ["ASAP", "W&T"];

现在，在我的component.html中，我想创建一个将这些字符串作为选项的选择。

<select ngModel="result" ngOptions="value for value in strategies">
</select>
{{ result }}

但是选项列表始终为空。 {{ strategies }}产生ASAP,W&T，这是正确的。即使我使用基本示例，例如：

<select ngModel="result" ngOptions="value for value in ['a', 'b']">
</select>

选项列表完全为空。我想念什么？

Answer 1

您需要在ngFor上使用options来构建角度（v2 +）中的选项： 另外，请确保组件中定义的strategies是公共的，因此可以在模板中使用。

<select  [(ngModel)]="result">
    <option *ngFor="let strategy of strategies" [value]="strategy">
        {{strategy.name}}
    </option>
</select>

还要确保使用*ngFor中的变量名来绑定值并显示选项的属性。

ng-options是angularJS的一部分，在Angular v2 +中未使用。

Answer 2

我们使用ngOptions指令的AngularJS创建要选择的元素列表，但从Angular 2+及更高版本开始，Angular提供了新的结构指令*ngFor，它将有助于创建动态列表。

要从html Angular获取选定的值，请提供称为ngModel的两种数据绑定指令。在Angular 2+中绑定两个数据有点像下面的

示例-

<select  [(ngModel)]="result">
    <option *ngFor="let strategy of strategies" [value]="strategy">
        {{strategy.name}}
    </option>
</select>

希望获得帮助！