Блог

Главная - Вопросы по программированию - флажок материала не установлен, даже значение модели равно true

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

#javascript #html #css #angular

#javascript #HTML #css #угловой

Вопрос:

У меня есть mat-таблица с некоторыми данными и флажками, которые следует проверять, когда 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.

Комментарии:

1. покажите нам element объект

2. пожалуйста, поделитесь своим полным кодом

3. Пожалуйста, проверьте объект элемента ниже, { «CompID»: «DataGenerator_514209», «select»: false, «excludeFields»: [ «SepalLength», «SepalWidth», «PetalLength», «PetalWidth», «Species», «IndexedSpecies», «deci», «booleandata», «datedata», «ipdata», «geodata», «Species1» , «Дискретный заполнитель», «элемент» ] }

4. добавьте полный код (html и ts)

5. Я не могу добавить полный код из-за некоторой политики в моей компании.

Ответ №1:

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

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

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

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

Ответ №2:

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

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

Ответ №3:

Здесь вы хотите установить флажок в соответствии с условием, element.select тогда вам нужно поставить element.select для привязки вашего свойства as [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>