Question

我对angular 6还是陌生的，这里我试图根据API数据将mat-checkbox设置为选中和未选中。

但是对于我来说这是行不通的，几乎我一直在尝试更改状态。但是对我来说这行不通。

API响应：

phantomJS

app.component.ts

将响应分配给本地变量，如下所示。

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

我已经检查了是否在控制台中获取数据，并且按预期在控制台中获得了响应。

aap.component.html

this.summary = data['Table'];

当前，它显示为选中的所有复选框。

谁能帮我解决这个问题。

Answer 1

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

您必须使用[(ngModel)]进行角度的两种方式的绑定数据。

为此目的使用[(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>

如何在Angular 6中使用api响应将mat-checkbox设置为选中和未选中

2 个答案: