这里我的组件代码在那里我推动所有id和绑定到签入复选框
for (var i = 0; i < this.featureData.length; i++) {
var user = this.featureData[i]
this.feature_id = user.feature_id;
this.datauser.push(this.feature_id);
}
这里我的Html代码将数据绑定到复选框以进行检查
<div *ngIf="!!datauser?.length">
<div class="ui test toggle checkbox">
<input type="checkbox" *ngFor="let data of datauser" [checked]="data == feature.feature_id" (change)="addInSelectedFeatures(feature.Feature.feature_id)" [value]="feature.feature_id">
<label></label>
</div>
</div>
<div class="ui test toggle checkbox" *ngIf="!(!!datauser?.length)">
<input type="checkbox" name="" (change)="addInSelectedFeatures(feature.Feature.feature_id)" [value]="feature.feature_id">
<label></label>
</div>
在html属性中选中了define checkbox初始值。更改此attr不会更改复选框视图。
在你的情况下,也许更好地使用[(ngModel)]:
...
<input type="checkbox"
*ngFor="let data of datauser"
[checked]="data.id== feature.feature_id"
[(ngModel)]="data.isChecked"
(change)="onCheckboxValueChange(data, feature)">
...
简单的工作示例: app.component.ts
import { Component } from '@angular/core';
import { routerAnimation } from '../shared/index';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
onCheckboxValueChange(data){
console.log(data);
}
}
app.component.html
<input type="checkbox"
*ngFor="let data of [{id: 1, isChecked: true }, {id: 2,isChecked: false }, {id: 3,isChecked: true }]"
[checked]="data.isChecked == true"
[(ngModel)]="data.isChecked"
(change)="onCheckboxValueChange(data)">