Angular 要启用或禁用“在上选择零部件”按钮，请在“角度材质”中单击

我使用了选择组件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>

点击图标i，e

{{icon}}

取消图标（i，e突出显示）将其更改为添加图标（i，e添加圆形轮廓），现在我需要在点击取消图标时禁用2个下拉菜单（选择组件），然后图标将更改为添加，单击“添加”选择要启用的组件。在冲浪时，我也得到了链接

但在这里，启用/禁用操作是通过2个单独的按钮使用2次单击功能执行的，但我需要它仅通过一个图标执行。我如何才能做到这一点？

尝试如下：

HTML:

角材料2应用程序
选项{{opt}
{{selectDisabled''add'：'cancel'}
禁用：{{selectDisabled}}

此问题如何获得2票和5个视图。有些事情很可疑，我的同事们投了票，我们正在处理同一个问题。@TamoDevSorry对于这个问题，我需要申请许多选定组件。我如何更改函数

{{selectDisabled？'add'：'cancel'

name，这样它就不会调用其他select组件。是的，请使用*ngFor并维护每个select元素的索引；我知道了，谢谢。

  public icon = 'highlight_off';

   public toggleIcon() {
   if (this.icon === 'highlight_off') {
     this.icon = 'add_circle_outline';
   } else {
     this.icon = 'highlight_off';
     }
   }

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