(Angular 2) 如何根据另一个下拉选择填充下拉列表

Question

我是 Angular 2 的新手，我目前正在尝试根据 mongoDB 中不同下拉列表中的选择来填充下拉列表。

问题：我可以很好地加载房间，但是每当我尝试加载项目（频道）名称时，它都会弄乱两个下拉菜单，只显示第一个下拉菜单为空并且下拉菜单 2 根本不显示。

我试过寻找关于此主题的其他主题，但它们似乎是针对 Angular 1 而不是 Angular 2。有人可以帮我吗？

这是我的代码： app.component.html

<div class="row">
<div class="col-md-12">
    <label>Choose a room</label>
    <select [(ngModel)]="nodes">
        <option *ngFor="let node of nodes"[ngValue]="node">{{node.name}}</option>
    </select>

    <br/><br/>
    <label>Choose an item</label>
    <div *ngFor="let module of node.modules">
        <select [(ngModel)]="channels">
            <option *ngFor="let channel of module.channels">
              {{channel.name}}
             </option>
        </select>
    </div>
</div>

Answer 1

您在其范围之外的第二个 ngFor 中使用了 node 变量。此变量仅存在于 ngFor 作用于的元素（及其属性）内。

您可能想要做的是等待第一个 select 的 selected 值发生变化，更新您的控制器中的一些变量，这应该会导致第二个 ngFor 更新。这可以通过使用 ngModelChange:

来完成

<div class="row">
<div class="col-md-12">
    <label>Choose a room</label>
    <select [(ngModel)]="nodes" (ngModelChange)="selectedNode=$event.target.value">
        <option *ngFor="let node of nodes"[ngValue]="node">{{node.name}}</option>
    </select>

    <br/><br/>
    <label>Choose an item</label>
    <div *ngFor="let module of selectedNode.modules">
        <select [(ngModel)]="channels">
            <option *ngFor="let channel of module.channels">
              {{channel.name}}
             </option>
        </select>
    </div>
</div>

(Angular 2) 如何根据另一个下拉选择填充下拉列表

(Angular 2) How to populate a dropdown based on another dropdown selection

html

javascript

mongodb

angularjs

angular2-forms