我对 Angular 2 相当陌生,目前我正在尝试根据 mongoDB 中不同下拉列表中的选择来填充下拉列表。
问题: 我可以很好地加载房间,但是每当我尝试加载项目( channel )名称时,它都会弄乱两个下拉列表,并且仅将第一个下拉列表显示为空 并且下拉菜单 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>
最佳答案
您在第二个 ngFor
中使用了超出其范围的 node
变量。该变量仅存在于 ngFor
所作用的元素(及其属性)内部。
您可能想要做的是等待第一个选择的选定值发生更改,更新 Controller 中的某些变量,然后这应该会导致第二个 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>
关于javascript - (Angular 2) 如何根据另一个下拉列表选择填充下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43710137/