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

我正在处理的东西有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>

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

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

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

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

简单地说：每个品牌都有自己的型号列表，其中有自己的型号列表

我的第一个问题是，在我使用ngModel之后，似乎我无法设置默认值（我希望它为所有这些设置显示我的第一个选项），因此我想知道如何实现这一点

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

我能做些什么来解决这个问题，而不需要对我所拥有的结构做太多的工作？也供将来参考，数据之间进行此类通信的最佳方式是什么？谢谢

这里有一些提示：

在

选择中使用（更改）

使用

change

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

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

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

为此：

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

---

我不明白为什么我需要重新初始化我的列表，因为我所有的数据都是不变的，并且通过ngModel和函数调用彼此绑定。我发现问题可能是GetListofNumber（currentModel）在品牌更改时没有被调用？代码的问题是

GetListofNumber（currentModel）

正在从

listOfDropdownData

返回数组。如果将某个元素推送到或移除到阵列中，或者阵列完全更改，则Angular仅更新

*ngFor

。因此，当您将一个新数组推送到

listOfDropdownData

时，Angular没有任何理由调用

GetListOfNumber（currentModel）

。因此，我的建议是使用第一个技巧（在

*ngFor

中使用类似

numbersList

的列表，并在选择

（更改）

事件时更新它）。

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