флажок материала не установлен, даже если значение модели истинно

Question

У меня есть таблица соответствия с некоторыми данными и флажками, которые следует проверять, когда свойство model.select имеет значение true, но когда я использую [(ngModel)]="element.select", все флажки проверяются.ниже приведен код,

<td mat-cell *matCellDef="let element">
   {{element.select}}
   <mat-checkbox [(ngModel)]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>
</td>

Пожалуйста, дайте мне знать, что не так в этом коде?

Я также пробовал связывать свойства [checked]="model.select".Это также не работает с этим.

Флажок должен быть установлен, когда element.select имеет значение true.

Answer 1

Здесь вы хотите установить флажок в соответствии с условием element.select, тогда вам нужно поставить element.select для привязки вашего свойства как [checked]=element.select вместо model.select. Итак, попробуйте так:

<td mat-cell *matCellDef="let element">
    {{element.select}}
  <mat-checkbox [(ngModel)]="element.select" [checked]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>
</td>

Answer 2

У вас есть сочетание реактивных форм (formControlName) и шаблонно-управляемых форм (ngModel), и это может вызывать некоторые проблемы.

Я бы попытался избавиться от этого formControlName, и он должен работать, как вы хотите.

Вот пример без formControlName: https://stackblitz.com/edit/angular-stack-checkboxtable-55568107 (Основан на примере самого материала)

Как вы можете видеть в этом примере, [(ngModel)] работает, как и ожидалось, и если вы добавите formControlName, он будет работать немного странно.

Answer 3

Добавить [checked] атрибут ckeckbox как [checked]="element.select":

<mat-checkbox [(ngModel)]="element.select"  [checked]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>