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

Question

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

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

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

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

<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

您需要在 options 上使用 ngFor 来构建 angular (v2+) 中的选项：还要确保组件中定义的 strategies 是 public，因此可以在模板中访问。

<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 中获取 selected 值，提供了两种称为 ngModel 的数据绑定指令。在 Angular 中绑定两个数据 2+ 有点不同，如下所示

例子-

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

希望对您有所帮助！

ngOptions not working, even with base example