Javascript （2）如何基于另一个下拉列表选择填充下拉列表

我是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>

选择一个房间
{{node.name}



选择一个项目
{{channel.name}

---

您在第二个

ngFor

变量中使用的

节点

超出了它的范围。此变量仅存在于

ngFor

所作用的元素（及其属性）内部

您可能要做的是等待更改第一个select的选定值，更新控制器中的某个变量，这将导致第二个

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>

选择一个房间
{{node.name}



选择一个项目
{{channel.name}

您在第二个

ngFor

变量中使用的

节点

超出了它的范围。此变量仅存在于

ngFor

所作用的元素（及其属性）内部

您可能要做的是等待更改第一个select的选定值，更新控制器中的某个变量，这将导致第二个

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>

选择一个房间
{{node.name}



选择一个项目
{{channel.name}