Как установить mat-checkbox как отмеченный и снятый, используя ответ API в Angular 6

Question

Я новичок в Angular 6, здесь я пытаюсь установить флажок mat как проверенный и не проверенный на основе данных API.

, но в моем случае это не сработало, почти я попробовал всеспособ изменить состояние. но у меня это не сработало.

Ответ API:

{"Table":[{"BUY_NOW_STATUS":"false"},{"BUY_NOW_STATUS":"true"},{"BUY_NOW_STATUS":"false"},{"BUY_NOW_STATUS":"true"}]}

app.component.ts

назначение ответа локальной переменнойследующим образом.

this.summary = data['Table'];

И я проверил, получаю ли я данные в консоли или нет, и получил ответ в консоли, как ожидалось.

aap.component.html

<div  *ngFor="let data of summary">
   <mat-checkbox [checked]="data.BUY_NOW_STATUS" class="mat-checkbox-inner-container">Buy now</mat-checkbox>
 </div>

В настоящее время он показывает все флажки, как отмечено.

Может кто-нибудь помочь мне исправить это.

Answer 1

Используйте ngModel для установки значений, как показано ниже.И свойство 'name ' необходимо установить, иначе флажок не будет работать должным образом.

<div  *ngFor="let data of summary; let i = index;">
   <mat-checkbox [(ngModel)]="data.BUY_NOW_STATUS" name="status{{i}}" class="mat-checkbox-inner-container">Buy now</mat-checkbox>
</div>

Answer 2

перед назначением, пожалуйста, проверьте тип данных вашего BUY_NOW_STATUS, поступающего с сервера, он должен быть логическим, а не строковым, иначе конвертируйте тип данных в логический

, вы должны использовать [(ngModel)] для 2 путейпривязка данных в угловых.

для этого применимого использования [(ngModel)]="data.BUY_NOW_STATUS"

это также поможет вам сохранить текущее значение вашего флажка, которое является истинным или ложным

после использования [(ngModel)] тамбесполезно использовать [checked]