在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;
        }
      }
    }
  }
}

dropdown-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];