* ngIf ... когда данные пустые, установите disabled = true для mat-checkbox

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

Директива

ngIf удалит элемент из DOM. Использовать троичный оператор в отключенном свойстве

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

Пример

Answer 3

Вы можете связать атрибут следующим образом:

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

, если это не сработает, это должно:

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