Angular 2.0和TypeScript - 填充< select>多维数组对象的选项 [英] Angular 2.0 and TypeScript - Populate <select> options from multi-dimensional array objects

问题描述

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

I would like to populate the <select name="selectmodel"> <option> from a nested array of objects based on the selection of the <select name="selectmake"> <option> element.

这是多维数组：

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 。

So, basically when you select Chevrolet for example, I would like to have the second element populated with Camaro and Corvette.

目前，第二个 select 元素用每个make的数组 [object Object] 填充，但无法弄清楚如何深入挖掘。

Currently, the second select element is populated with an array [object Object] for each make, but can't figure out how to dig this deeper.

这是一个插件：
https://embed.plnkr.co/0eEIJg5uzL6KsI70wWsC/

任何帮助都将不胜感激。

Any help would be appreciated.

推荐答案

这就是你的HTML应该是这样的：

This is how your HTML should look like:

<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 指令绑定了在第一个下拉列表中选择的整个对象，因此它可用于填充第二次下拉。你会注意到的另一件有趣的事情是 Elvis 运算符（？）我在第二个下拉列表中使用它 - 它用于告诉第二个下拉列表仅在第一个下拉列表中选择值后填充自身，这是为了避免在迭代 undefined 值时出错。如果您不想使用 Elvis 运算符，可以使用 * ngIf 指令来防止提到错误，但是这意味着只有在第一个下拉列表中选择了某些内容后才会出现第二个下拉列表：

So, what's happening here is that selected value of selectmake dropdown is binded to makeListFilter and second dropdown selectmodel is populated based on selected value of first dropdown. You will notice I binded the whole Object that is selected in first dropdown using ngValue directive so it can be used to populate second dropdown. Another interesting thing you'll notice is Elvis operator (?) I used in second dropdown - it is used to tell second dropdown to populate itself only after value is selected in first dropdown, this is necessary to avoid getting error for iterating through an undefined value. If you don't want to use Elvis operator, you can use *ngIf directive to prevent getting mentioned error, but that means that second dropdown will appear only after you select something in the first dropdown:

<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>多维数组对象的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！