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

Question

我想根据<select name="selectmake"> <option> 元素的选择从嵌套的对象数组中填充<select name="selectmodel"> <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>

所以，基本上当您选择雪佛兰时，我希望第二个元素填充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 下拉列表的选定值绑定到 makeListFilter 并且第二个下拉列表 selectmodel 根据第一个下拉列表的选定值填充。您会注意到我使用ngValue 指令绑定了在第一个下拉列表中选择的整个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>