如何启用和禁用角材料中的滑动切换答案

【问题标题】：How to enable and disable slide toggle in angular material如何启用和禁用角材料中的滑动切换
【发布时间】：2021-12-26 14:29:53
【问题描述】：

我已经生成了使用 for 循环的垫滑动切换列表，但是想要的是，当我单击一个滑动切换时，其他滑动切换应该被禁用。

我的代码：

HTML：

     <div class="row">
        <div class="col-md-6 mt-2" *ngFor="let data of attributes">
              <mat-slide-toggle>{{data}}</mat-slide-toggle>
        </div>
    </div>

TS：

   attributes = ["Last 7 days", "Last 30 days", "Last 60 days"]

在这种情况下，当我点击“过去 7 天”滑动切换时，“过去 30 天”，“过去 60 天”应该被禁用，

【问题讨论】：

标签： angular angular-material

【解决方案1】：

更改您的 attributes 数组以保存具有禁用状态的属性和属性的对象。例如。 options = [{id: 1, title: "Last 7 days", disabled: false}, ...]; 添加id 以识别哪个被切换。
将disabled 属性绑定到disabled 输入，将id 绑定到id 属性。
查看API Docs 并使用@Output() change: EventEmitter<MatSlideToggleChange> 事件调用一个函数，该函数迭代您的数组并将所有禁用标志设置为true，但触发事件的标志除外。
为启用所有切换执行相同的操作。

  <div *ngFor="let data of options">
    <mat-slide-toggle 
       [id]="data.id" 
       [disabled]="data.disabled" 
       (change)="disableAll($event)">
        {{data.title}}
    </mat-slide-toggle>
  </div>


  options = [
    { id: 1, title: "Last 7 days", disabled: false },
    { id: 2, title: "Last 30 days", disabled: false },
    { id: 3, title: "Last 60 days", disabled: false }
  ];

  disableAll(ev: MatSlideToggleChange) {
    if (ev.checked) {
      this.options
        .filter(opt => opt.id != ev.source._elementRef.nativeElement.id)
        .forEach(opt => (opt.disabled = true));
    } else {
      this.options.forEach(opt => (opt.disabled = false));
    }
  }

这是一个演示：https://stackblitz.com/edit/angular-fhmsyp?file=src%2Fapp%2Fslide-toggle-overview-example.ts

【讨论】：

【解决方案2】：

 <mat-slide-toggle color="primary"
        place
        [(ngModel)]="disalbeShipping"></mat-slide-toggle>
    <mat-form-field appearance='outline'
        validationMessageContainer>
        <mat-label>Tax Shipping Rate</mat-label>
        <input matInput
            placeholder=''
            formControlName=''
            required
            [disabled]="disalbeShipping">
    </mat-form-field>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。