下拉启用和禁用答案

【问题标题】：Dropdown enabling and disabling下拉启用和禁用
【发布时间】：2020-01-16 22:48:04
【问题描述】：

我的代码：

<mat-select 
[formControl]="Rooms" [(ngModel)]="dropdown"placeholder="ChooseRooms"multiple>
<mat-option *ngFor="let room of RoomList" [value]="room">
   {{room}}
</mat option>
</mat-select>

<mat-select 
[formControl]="devices" [disabled] = "!dropdown"placeholder="ChooseDevices"multiple>
<mat-option [value]="device" disabled>
   {{device}}
</mat-option>
</mat-select>

问题：

在上面的代码中，我有两个下拉菜单“房间”和“设备”，其中选项采用复选框的形式。

从上面的代码中，每当我选中第一个下拉列表中的任何复选框时，我都可以启用第二个下拉“设备”，但是，每当我取消选中任何复选框时，我都无法禁用第二个下拉“设备”。

【问题讨论】：

为什么要混合反应式和模板驱动的表单。不建议同时使用两者。 stackoverflow.com/questions/55739509/…
您不应该检查第一个下拉菜单是否存在。您应该将 selectionChange 事件添加到第一个下拉列表，然后检查是否所有框都未选中。在同一个函数中，您应该定义一个变量，如果选中任何一个框，该变量将为 false。使用相同的变量来确定是否应禁用第二个下拉菜单。

标签： angular angular-material

【解决方案1】：

在这里您需要更改 disabled 属性的条件，例如 - [disabled]="!dropdown.length"

<mat-select [(ngModel)]="dropdown" placeholder="ChooseRooms" multiple>
   <mat-option *ngFor="let room of Rooms" [value]="room">
   {{room}}
   </mat-option>
</mat-select>

<mat-select  [disabled]="!dropdown.length" placeholder="ChooseDevices" multiple>
   <mat-option [value]="devices">
   {{devices}}
   </mat-option>
</mat-select>

【讨论】：

它显示无法将属性长度分配给未定义
您需要为 TS 文件创建一个变量 'dropdown'。