angular - 如何在 Angular Material 中启用和禁用滑动切换

Question

我已经使用 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 天”，

Answer 1

1. 更改您的 attributes用于保存具有禁用状态属性和属性的对象的数组。例如。 options = [{id: 1, title: "Last 7 days", disabled: false}, ...];添加id以确定哪个被切换。

2. 绑定(bind) disabled属性(property)disabled 输入和 id到id属性。

3. 请参阅API Docs并使用@Output() change: EventEmitter<MatSlideToggleChange>事件来调用迭代数组并将所有禁用标志设置为 true 的函数除了触发事件的那一个。

4. 执行相同的操作以启用所有切换。

  <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