使用ngModel在3个选择选项下拉列表之间绑定数据时出现问题。 （角）

Question

我正在做的事情有3个选择，我试图让它们很好地同步/绑定。我已经制作了一些虚拟代码来总结我的问题（因为我有一个更大的项目，并进行一系列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列表。

简单地说：每个品牌都有自己的模型列表，其中有自己的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];