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();
      }