(Angular 2)如何根据另一个下拉选择填充下拉列表 [英] (Angular 2) How to populate a dropdown based on another dropdown selection

问题描述

我对 Angular 2 还很陌生，我目前正在尝试根据来自 mongoDB 的不同下拉列表中的选择来填充下拉列表.

问题:我可以很好地加载房间，但是每当我尝试加载项目(频道)名称时，它都会弄乱两个下拉列表并且只将第一个下拉列表显示为空并且下拉列表 2 根本不显示.

我曾尝试寻找有关此主题的其他主题，但它们似乎是针对 Angular 1 而不是 Angular 2.有人可以帮我吗?

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

<div class="col-md-12"><label>选择房间</label><select [(ngModel)]="nodes"><option *ngFor="let node of nodes"[ngValue]="node">{{node.name}}</option></选择><br/><br/><label>选择一个项目</label><div *ngFor="让 node.modules 的模块"><select [(ngModel)]="channels"><option *ngFor="let channel of module.channels">{{频道名称}}</选项></选择>

解决方案

您在其作用域之外的第二个 ngFor 中使用了 node 变量.此变量仅存在于 ngFor 所作用的元素(及其属性)中.

您可能想要做的是等待第一个选择的选定值发生更改，更新控制器中的某个变量，然后应该会导致第二个 ngFor 更新.这可以通过使用 ngModelChange 来完成:

<div class="col-md-12"><label>选择房间</label><select [(ngModel)]="nodes" (ngModelChange)="selectedNode=$event.target.value"><option *ngFor="let node of nodes"[ngValue]="node">{{node.name}}</option></选择><br/><br/><label>选择一个项目</label><div *ngFor="let module of selectedNode.modules"><select [(ngModel)]="channels"><option *ngFor="let channel of module.channels">{{频道名称}}</选项></选择>

I'm fairly new to Angular 2, and I'm currently trying to populate a dropdown based on the selection from a different dropdown from mongoDB.

The Problem: I can load the rooms just fine, but whenever I try to load the items(channel) names, it messes up both dropdowns and just shows the first dropdown as empty and the dropdown 2 doesnt show up at all.

I've tried looking for other threads about this topic but they seem to be for Angular 1 instead of Angular 2. Can someone help me out?

Here's my code: 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>

解决方案

You're using the node variable in the second ngFor outside of its scope. This variable only exists inside the element(and its attributes) that the ngFor is acting on.

What you probably want to do is wait for changes to the selected value of the first select, update some variable in your controller, which should then cause the second ngFor to update. This can be done by using 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)如何根据另一个下拉选择填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！