即使使用基本示例，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来构建angular（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

AngularJS我们使用ngOptions指令创建select的元素列表但是从Angular 2+和Angular上面提供了新的结构指令*ngFor，这将有助于创建动态列表。

并从html Angular中获取选定值，提供名为ngModel的双向数据绑定指令。绑定Angular 2+中的两个数据有点不同，如下所示

示例 -

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

希望这有帮助！