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

Question

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

所以，基本上当你以 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>

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

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

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

Angular 2.0 and TypeScript - Populate <select> options from multi-dimensional array objects

javascript

arrays

multidimensional-array

angular2-forms

angular