*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 代码中使用一个方法？不知道该怎么做。

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