如何使用 Angular 6 中的 api 响应将 mat-checkbox 设置为选中和取消选中

Question

我是 angular 6 的新手，在这里我试图根据 API 数据将 mat-checkbox 设置为选中和未选中。

但在我的情况下它没有用，几乎我已经尝试了所有的方式来改变状态。但它对我没有用。

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

在分配之前，请检查来自服务器的 BUY_NOW_STATUS 的数据类型，它应该是布尔值而不是字符串，否则将数据类型转换为布尔值

您必须将[(ngModel)]用于角度的 2 路绑定数据。

使此适用使用[(ngModel)]="data.BUY_NOW_STATUS"

这也将帮助您存储复选框的当前值是真还是假

使用[(ngModel)]没有用[checked]

Answer 2

使用ngModel设置如下值。 并且需要设置“名称”属性，否则复选框将无法正常工作..

<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>