javascript - ngx bootstrap手风琴头内的复选框无法正常工作
问题描述
我在手风琴标题中有一个复选框,如下所示
<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();
}
推荐阅读
- java - 解析到 POJO 时如何在 JSON 对象中排除 Null 列表
- node.js - Axios - 错误:请求失败,状态码为 503
- c++ - 围绕 new/delete 编写内存分析包装器的合适方法是什么?
- xml - 替换 xsl/xslt 中的值
- python - Numpy 连接错误 (np.concatenate)
- c# - 在 C# 中动态地从 JSON 中删除节点
- mysql - 如何使我的选择语句确定性地仅匹配我的数据集的 1/n?
- python - Copying and deleting files from google storage but getting python error as quote_from_bytes() expected bytes
- sql-server - 将一系列不同单引号的字符转换为nvarchar
- android-studio - Android 应用程序未执行。请帮我解决这个问题