在 3 个选择选项下拉列表之间使用 ngModel 绑定数据时出现问题.(棱角分明)

Question

我正在处理的东西有 3 个选择，我正在尝试让它们很好地同步/绑定在一起。 我制作了一些虚拟代码来总结我的问题(因为我有一个更大的项目，并进行了一堆 API 调用以将数据转换为此形式)。在这里：

populate-dropdown.component.html

<div id=myForm>
<label> Brands:
<select id ="Select1" class="input-small" [(ngModel)]="currentBrand">
<option *ngFor="let brand of getListOfBrands()">
{{ brand }}
</option>
</select>
</label>
</div>
<br/>
<div id=myForm>
<label> Models:
<select id ="Select1" class="input-small" [(ngModel)]="currentModel">
<option *ngFor="let model of getListOfModels(currentBrand)">
{{ model }}
</option>
</select>
</label>
</div>
<br/>
<div id=myForm>
<label> Model Numbers:
<select id ="Select1" class="input-small" [(ngModel)]="currentNumber">
<option *ngFor="let number of getListOfNumbers(currentModel)">
{{ number }}
</option>
</select>
</label>
</div>

populate-dropdown.component.ts

import { Component, OnInit, Output } from '@angular/core';
import { DropdownData } from '../dropdown-data';
@Component({
selector: 'app-populate-dropdown',
templateUrl: './populate-dropdown.component.html',
styleUrls: ['./populate-dropdown.component.css']
})
export class PopulateDropdownComponent implements OnInit {
constructor() { }
ngOnInit() {
this.initializeStuff();
}
currentBrand: string;
currentModel: string;
currentNumber: number;
listOfDropdownData = [];
private initializeStuff() {
let firstGroup = new DropdownData();
let secondGroup = new DropdownData();
firstGroup.nameOfBrand = "The Best";
secondGroup.nameOfBrand = "The Worst";
firstGroup.listOfModels = ["Best1", "Best2", "Best3", "Best4", "Best5"];
secondGroup.listOfModels = ["Worst1", "Worst2"];
let one = {model: "Best1", modelNumbers: [1901, 1905, 1909]};
let two = {model: "Best2", modelNumbers: [200, 2000, 20000, 20000]};
let three = {model: "Best3", modelNumbers: [300]};
let four = {model: "Best4", modelNumbers: [400, 4500]};
let five = {model: "Best5", modelNumbers: [510, 520, 530]};
firstGroup.listOfModelsWithNumbers.push(one);
firstGroup.listOfModelsWithNumbers.push(two);
firstGroup.listOfModelsWithNumbers.push(three);
firstGroup.listOfModelsWithNumbers.push(four);
firstGroup.listOfModelsWithNumbers.push(five);
let first = {model: "Worst1", modelNumbers: [97, 24, 108]};
let second = {model: "Worst2", modelNumbers: [19]};
secondGroup.listOfModelsWithNumbers.push(first);
secondGroup.listOfModelsWithNumbers.push(second);
this.listOfDropdownData.push(firstGroup);
this.listOfDropdownData.push(secondGroup);
}
private getListOfBrands() {
let i : number;
let myList = [];
for(i = 0; i < this.listOfDropdownData.length; i++) {
myList.push(this.listOfDropdownData[i].nameOfBrand);
}
return myList;
}
private getListOfModels(brand: string) {
let i : number;
for(i = 0; i < this.listOfDropdownData.length; i++) {
if(this.listOfDropdownData[i].nameOfBrand == brand) {
return this.listOfDropdownData[i].listOfModels;
}
}
}
private getListOfNumbers(model: string) {
let i: number;
let j: number;
for(i = 0; i < this.listOfDropdownData.length; i++) {
for(j = 0; j < this.listOfDropdownData[i].listOfModelsWithNumbers.length; j++) {
if(this.listOfDropdownData[i].listOfModelsWithNumbers[j].model == model) {
return this.listOfDropdownData[i].listOfModelsWithNumbers[j].modelNumbers;
}
}
}
}
}

下拉列表-data.ts

export class DropdownData {
nameOfBrand: string;
listOfModels: string[];
listOfModelsWithNumbers: any[] = [];
}

我只是在我的appComponent中调用我的populateDropdown组件，如下所示：

<app-populate-dropdown></app-populate-dropdown>

因此，要了解我想要实现的目标： 我希望页面最初默认为第一个品牌、为其显示的第一个模型以及与该模型关联的第一个数字。如果用户更改了模型，则 modelNumbers 也应该更改，如果用户更改了品牌，我想再次显示第一个模型及其 modelNumbers 列表。

简而言之：每个品牌都有自己的型号列表，该列表都有自己的型号列表

我的第一个问题是，在使用ngModel之后，似乎我无法设置默认值(我希望它显示我的第一个选项)，所以我想知道我该如何处理这个问题。

我的下一个问题是，尽管品牌和型号是同步的，但除非我更改型号(我希望它们默认)，否则 modelNumbers 不会显示，并且当我切换品牌时，来自前一个品牌型号的 modelNumbers 仍然存在。

我可以做些什么来解决这个问题，而无需对我所拥有的结构进行太多工作？同样供将来参考，数据之间这种通信的最佳方式是什么？谢谢

Answer 1

有一些提示：

在select中使用(更改)

使用change事件并在更改时更新列表。 像这样：

<select id ="Select1" class="input-small" [(ngModel)]="currentBrand" (change)="onBrandChange()">
<option *ngFor="let brand of brandsList">
{{ brand }}
</option>
</select>

不要推送到listOfDropdownData而是重新初始化它

更改此代码：

this.listOfDropdownData.push(firstGroup);
this.listOfDropdownData.push(secondGroup);

对此：

this.listOfDropdownData = [...this.listOfDropdownData, firstGroup , secondGroup];