在 3 select 选项下拉列表之间使用 ngModel 绑定数据时出现问题。 (Angular)

Question

我正在做的事情有 3 个选择，我正在尝试将它们 synchronize/bind 很好地组合在一起。 我制作了一些虚拟代码来总结我的问题（因为我有一个更大的项目并进行了一堆 API 调用以将数据导入此表单）。这是：

填充-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>

填充-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 之后，我似乎无法设置默认值（我希望它为所有这些值显示我的第一个选项），所以我想知道我怎么能解决这个问题。

我的下一个问题是，虽然品牌和型号是同步的，但除非我更改型号（我希望它们默认），否则型号不会显示，并且当我切换品牌时，以前品牌型号的型号仍然是那里。

我可以做些什么来解决这个问题而不需要过多地围绕我所拥有的结构进行工作？另外为了将来参考，这种数据之间的通信的最佳方式是什么？谢谢

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