我是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>
答案 0 :(得分:2)
您在其范围之外的第二个node
中使用ngFor
变量。此变量仅存在于ngFor
正在作用的元素(及其属性)中。
您可能想要做的是等待更改第一个选择的选定值,更新控制器中的某个变量,然后应该导致第二个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>