MongoDB
 sql >> Datenbank >  >> NoSQL >> MongoDB

(Winkel 2) So füllen Sie ein Dropdown-Menü basierend auf einer anderen Dropdown-Auswahl

Sie verwenden den node Variable in der zweiten ngFor außerhalb seines Geltungsbereichs. Diese Variable existiert nur innerhalb des Elements (und seiner Attribute), das ngFor wirkt auf.

Was Sie wahrscheinlich tun möchten, ist, auf Änderungen am ausgewählten Wert des ersten Selects zu warten, einige Variablen in Ihrem Controller zu aktualisieren, was dann das zweite ngFor verursachen sollte zu aktualisieren. Dies kann mit ngModelChange erfolgen :

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