默认选中复选框需要在角度6中取消选中

问题描述 投票:0回答:1

这里我的组件代码在那里我推动所有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>
angular typescript
1个回答
0
投票

在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)">
© www.soinside.com 2019 - 2024. All rights reserved.