如何在angular14中禁用特定的mat复选框

Question

我在我的application.Trying中使用了角质材料来禁用特殊的垫子检查箱，我试过了，但没有正常工作。它正在分解所有的checkbox.But，我只想禁用汽车和电机的复选框。该怎么做呢？如果有人知道，请帮忙找出解决办法。

mautocomponent.html：

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option
    *ngFor="let data of filteredData | async"
    [value]="data"
    [disabled]="isDisable(data)"
  >
    <div (click)="optionClicked($event, data)">
      <mat-checkbox
        [checked]="data.selected"
        (change)="toggleSelection(data)"
        (click)="$event.stopPropagation()"
        [disabled]="isDisable(data)"
      >
        {{ data.item }}
      </mat-checkbox>
    </div>
  </mat-option>
</mat-autocomplete>

mautocomponent.ts：

      isDisable(obj:any){
    //Only disable Car and Motor
    var index = this.rawData.indexOf(obj);
    console.log(index)
    if (index == -1) {
      return false;
    }
    else {
      return true;
    }

  }

演示：https://stackblitz.com/edit/angular-ivy-6bvdt7?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts

Answer 1

你离我这么近。为什么不直接使用传递给obj函数的isDisable()。

isDisable(obj: any){
    console.log(obj)
    if (obj.item === 'Car' || obj.item === 'Motor') {
      return true;
    }
    else {
      return false;
    }

}

SB演示

OP询问如何从父组件(app.component.ts)传递禁用列表。这样做的方法之一是，将禁用项目的列表从父母传递给吉拉德。

app.component.ts:
optionsToHide = ['Car', 'Motor'];

app.component.html:
<app-mauto
  ...
  [optionsToHide]="optionsToHide"
  ...
>

mauto.component.ts:

isDisable(obj: any){

  if (this.optionsToHide.findIndex(item => item === obj.item) > -1) 
  {
    return true;
  }
  else {
    return false;
  }
}