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

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>

Example

* ng如果...当数据为空时，将mat-checkbox设置为disable = true

3 个答案: