如何解决ngx引导手风琴标题中的复选框无法正常工作
我的手风琴标题中有一个复选框,如下所示:
<accordion-group class="container-fluid"
*ngFor="let header of data.premiseMeters; let i = index" (isOpenChange)="fetchMeterHistory($event)">
<div class="row" accordion-heading>
<input type="checkbox" [(ngModel)]="header.isChecked" class="form-check-input" (click)="checkboxClick()" >
<label class="form-check-label" for="check"></label>
<span class="w20">MP Number: {{header.mp}}</span>
<span class="w20"> ID: {{header.id}}</span>
</div>
<div class="accordian-inner-content">
<table class="table">
<thead>
<tr class="meter-reading-header">
<th scope="col">Date</th>
<th scope="col">reading</th>
<th scope="col">type</th>
<th scope="col">usage</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of readingHistory" class="meter-reading-content">
<td>{{data.date}} </td>
<td>{{data.reading}}</td>
<td>{{data.type}}</td>
<td>{{data.usage}}</td>
</tr>
</tbody>
</table>
</div>
</accordion-group>
</accordion>
下面是我在单击复选框时要调用的函数,这将阻止从复选框传播。
checkboxClick(header,$event){
console.log('Checked state: ' + header.checked);
$event.stopPropagation();
}
不幸的是,当我单击复选框时,它没有更改值。 header.checked具有布尔值,该值是我从服务调用响应中获取的。我不太了解我在这里做错了什么。 任何帮助将不胜感激。
谢谢。
解决方法
先添加(click)="checkboxClick()"
,然后
checkboxClick(header,$event){
...
$event.stopPropagation();
}
您在[(ngModel)]="header.isChecked"
上覆盖了绑定。
尝试将其更改为
checkboxClick(header,$event){
...
header.checked = ! header.checked
$event.stopPropagation();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。