ngx bootstrap 手风琴 header 内的复选框无法正常工作

Question

我在手风琴中有一个复选框 header 如下所示

    <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 有一个布尔值，我从服务调用响应中得到它。我不太明白我在这里做错了什么。任何帮助将不胜感激。

提前致谢。

Answer 1

通过添加 (click)="checkboxClick()" 然后

checkboxClick(header, $event){
         ...
        $event.stopPropagation();
      }

您正在覆盖此处的绑定 [(ngModel)]="header.isChecked"。

尝试将其更改为

checkboxClick(header, $event){
         ...
        header.checked = ! header.checked
        $event.stopPropagation();
      }

ngx bootstrap 手风琴 header 内的复选框无法正常工作

Checkbox inside ngx bootstrap accordion header not working properly

javascript

angular

checkbox

accordion

ngx-bootstrap