javascript - Angular 2.0 和 TypeScript - 从多维数组对象填充 <select> 选项

Question

我想填充 <select name="selectmodel"> <option>来自嵌套的对象数组，基于对 <select name="selectmake"> <option> 的选择元素。

这是多维数组:

muscleCars = [
    {
      id: 1, name: "Chevrolet", models: [
        { model: "Camaro" },
        { model: "Corvette" }
      ]
    },
    {
      id: 2, name: "Dodge", models: [
        { model: "Charger" },
        { model: "Challenger" },
        { model: "Viper" }
      ]
    },
    {
      id: 3, name: "Ford", models: [
        { model: "GT" },
        { model: "Mustang" }
      ]
    }
];

这是HTML

//select for Make:
<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.name">{{muscleCar.name}}</option>
</select>

//select for Model:
<select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.models">{{muscleCar.models}}</option>
</select>

因此，基本上当您选择 Chevrolet 时，我希望第二个元素填充为 Camaro和 Corvette .

目前，第二个select元素填充有数组 [object Object]对于每个品牌，但无法弄清楚如何更深入地挖掘这一点。

这是一个小插曲: https://embed.plnkr.co/0eEIJg5uzL6KsI70wWsC/

如有任何帮助，我们将不胜感激。

Answer 1

您的 HTML 应该是这样的:

<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option>
</select>

<select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let carModel of makeListFilter?.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>

所以，这里发生的是 selectmake 下拉列表的选定值绑定(bind)到 makeListFilter 并且第二个下拉列表 selectmodel 是根据选定值填充的第一个下拉菜单。您会注意到我使用 ngValue 指令绑定(bind)了在第一个下拉列表中选择的整个 Object，因此它可用于填充第二个下拉列表。您会注意到的另一个有趣的事情是我在第二个下拉列表中使用的 Elvis 运算符 (?) - 它用于告诉第二个下拉列表仅在第一个选择值后填充自身下拉列表，这是避免在遍历 undefined 值时出错所必需的。如果您不想使用 Elvis 运算符，您可以使用 *ngIf 指令来防止出现提到的错误，但这意味着第二个下拉列表只会在您选择某些内容后出现在第一个下拉列表中:

<select *ngIf="makeListFilter" name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let carModel of makeListFilter.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>