Question

我有两个<select>元素：

<select [(ngModel)]="model.SelectedSomeValue">
    <option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>

<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
    <option *ngFor="let otherValue of model.SelectedSomeValue.OtherValues">{{ otherValue }}</option>
</select>

似乎您无法将第二个<select>绑定到model.SelectedSomeValue，因为它从未正确填充。它包含value，但是通过指定[value]="value"，可以预期存储对象引用，但事实并非如此。那么我们如何在两个<select>元素之间进行绑定呢？

Answer 1

如果我理解您的问题，您希望一个选择器选择一个类别，第二个选择器选择该类别中的选项？因此，如果您更改选择器1，那么您将在选择器2中获得不同的项目列表？

如果是，请检查此Plunker：https://embed.plnkr.co/UErCcJeX5ply1BXSjweY/

测试版中存在一个错误，导致ngModel无法在某些浏览器上运行，因此请确保至少升级到RC（plunker是RC5）。

基本上，代码是这样的：

<p><select [(ngModel)]="selected">
    <option value=""></option>
    <option *ngFor="let datum of data" [ngValue]="datum">{{datum.name}}</option>
</select>

<p><select [(ngModel)]="selected2">
    <option *ngFor="let val of selected?.value" [ngValue]="val">{{val}}</option>
</select>

该组件包含数据中的对象列表以及将所选值存储在selected和selected2中的位置。第一个选择器使用数据显示选项（并将子对象存储为选项值）并绑定到选定的变量。第二个第二个选择器使用selected.values创建选项，并将选择存储在selected2。

angular2，将select元素绑定到另一个select元素的选择

1 个答案: