时间戳

首页 > 解决方案 > 下拉启用和禁用

angular - 下拉启用和禁用

问题描述

我的代码：

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

问题：

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

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

标签： angularangular-material

解决方案

在这里，您需要更改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>

推荐阅读