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

问题描述

我想填充 <option> 基于 元素.

这里是多维数组:

muscleCars = [{id:1，名称:雪佛兰"，车型:[{模型:科迈罗"}，{ 型号:克尔维特"}]},{id:2，名称:道奇"，型号:[{型号:充电器"}，{模型:挑战者"}，{ 模型:毒蛇"}]},{ID:3，名称:福特"，型号:[{模型:GT"}，{ 型号:野马"}]}];

这是 HTML

//选择为Make:<select name="selectmake" [(ngModel)]="makeListFilter"><option *ngFor="让肌肉车的肌肉车" [ngValue]="muscleCar.name">{{muscleCar.name}}</option></选择>//选择型号:<select name="selectmodel" [(ngModel)]="modelListFilter"><option *ngFor="让肌肉车的肌肉车" [ngValue]="muscleCar.models">{{muscleCar.models}}</option></选择>

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

目前，第二个 select 元素为每个 make 填充了一个数组 [object Object]，但无法弄清楚如何更深入地挖掘.>

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

任何帮助将不胜感激.

解决方案

HTML 应该是这样的:

<option *ngFor="让肌肉车的肌肉车" [ngValue]="muscleCar">{{muscleCar.name}}</option></选择><select name="selectmodel" [(ngModel)]="modelListFilter"><option *ngFor="let carModel of makeListFilter?.models" [ngValue]="carModel.model">{{carModel.model}}</option></选择>
所以，这里发生的事情是 selectmake 下拉列表的选定值绑定到 makeListFilter 并且第二个下拉列表 selectmodel 基于选定值填充第一个下拉列表.您会注意到我使用 ngValue 指令绑定了在第一个下拉列表中选择的整个 Object，因此它可以用于填充第二个下拉列表.您会注意到的另一件有趣的事情是我在第二个下拉列表中使用的 Elvis 运算符 (?) - 它用于告诉第二个下拉列表仅在第一个选择值后填充自身下拉菜单，这对于避免在迭代 undefined 值时出错是必要的.如果您不想使用 Elvis 运算符，则可以使用 *ngIf 指令来防止出现提及错误，但这意味着只有在您选择某些内容后才会出现第二个下拉列表在第一个下拉列表中:
<option *ngFor="let carModel of makeListFilter.models" [ngValue]="carModel.model">{{carModel.model}}</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.

Here is the multi-dimensional array:

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" }
      ]
    }
];

This is the 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>

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

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.

Here is a plunk: https://embed.plnkr.co/0eEIJg5uzL6KsI70wWsC/

Any help would be appreciated.

解决方案

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>

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屋！