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>

因此，基本上，当您选择雪佛兰时，我希望第二个元素填充为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是根据第一个下拉列表的选定值填充的。Object您会注意到我使用指令绑定了第一个下拉列表中选择的整体ngValue，因此它可以用于填充第二个下拉列表。您会注意到的另一个有趣的事情是我在第二个下拉列表中使用的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>