我使用选择组件 2 次来选择时间,我还添加了图标作为后缀以执行添加和取消操作。如下图所示
这是代码
HTML
<mat-form-field class="no-line time">
<mat-select [(value)]="selectmonmor">
<mat-option *ngFor="let mondaymorning of mondaymornings" [value]="mondaymorning.value">
{{mondaymorning.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="no-line time">
<mat-select [(value)]="selectmoneve">
<mat-option *ngFor="let mondayevening of mondayevenings" [value]="mondayevening.value">
{{mondayevening.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button matSuffix mat-icon-button >
<mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>
</button>
TS
public icon = 'highlight_off';
public toggleIcon() {
if (this.icon === 'highlight_off') {
this.icon = 'add_circle_outline';
} else {
this.icon = 'highlight_off';
}
}
点击图标 i,e <mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>
取消图标(即 highlight_off)变为添加图标(即 add_circle_outline)现在我需要禁用 2 下拉菜单(选择> components) 单击取消图标,然后图标将更改为 add,单击 add 选择要启用的组件。在冲浪时我得到了 stackblitz也有链接
但是这里启用/禁用操作是通过使用 2 个单击功能的 2 个单独按钮执行的,但我需要它只通过一个图标执行。我该怎么做?
最佳答案
像这样尝试:
HTML:
<mat-toolbar color="primary">
Angular Material 2 App
</mat-toolbar>
<div class="basic-container">
<mat-form-field>
<mat-select placeholder="Sample" [disabled]="selectDisabled">
<mat-option *ngFor="let opt of [1, 2, 3, 4]" [value]="opt">
Option {{ opt }}
</mat-option>
</mat-select>
</mat-form-field>
<button (click)="selectDisabled = !selectDisabled" mat-icon-button>
<mat-icon >{{selectDisabled?'add': 'cancel'}}</mat-icon>
</button>
<pre>disabled: {{ selectDisabled }}</pre>
</div>
关于angular - 要在 Angular Material 中单击按钮时启用或禁用选择组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52089201/