*ngIf... 當數據為空時，為 mat-checkbox 設置 disabled=true

Question

我有以下代碼：

<div class="item-container">
  <mat-checkbox class="item">{{contactInfo.privateMobile}}</mat-checkbox>
</div>

如果contactInfo.privateMobile為空，我不希望用戶能夠選中該復選框。

我嘗試了類似的方法： <mat-checkbox *ngIf={{contactInfo.privateMobile}} === null disabled=true" class="item">{{contactInfo.privateMobile}}</mat-checkbox> , 但這不起作用或編譯。也許我需要在我的 TypeScript 代碼中使用一個方法來代替？不知道如何 go 關於它。

Answer 1

不必在*ngIf中使用{{}} ：

<div class="item-container">
  <mat-checkbox *ngIf="contactInfo.privateMobile" class="item">{{contactInfo.privateMobile}}</mat-checkbox>
</div>

如果您只想禁用它，您可以執行以下操作：

<div class="item-container">
  <mat-checkbox [disabled]="!contactInfo.privateMobile" class="item">{{contactInfo.privateMobile || '(private mobile unavailable)'}}</mat-checkbox>
</div>

演示： https://stackblitz.com/edit/angular-h1sfoy?file=app%2Fcheckbox-overview-example.html

Answer 2

您可以像這樣綁定屬性：

[disabled]="contactInfo.privateMobile === null"

如果這不起作用，這應該：

[attr.disabled]="contactInfo.privateMobile === null ? 'disabled' : null"

Answer 3

ngIf 指令將從 DOM 中刪除元素。 在禁用屬性中使用三元運算符

<mat-checkbox [disabled]=" contactInfo?.privateMobile === null ? true : false">Check me!</mat-checkbox>

例子