(Angular 2) Cách điền một menu thả xuống dựa trên một lựa chọn thả xuống khác

Bạn đang sử dụng nút node biến trong ngFor thứ hai ngoài phạm vi của nó. Biến này chỉ tồn tại bên trong phần tử (và các thuộc tính của nó) mà ngFor đang hành động.

Những gì bạn có thể muốn làm là đợi các thay đổi đối với giá trị đã chọn của lựa chọn đầu tiên, cập nhật một số biến trong bộ điều khiển của bạn, sau đó sẽ gây ra ngFor thứ hai để cập nhật. Bạn có thể thực hiện việc này bằng cách sử dụng 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>