ngx bootstrap 手風琴標題中的復選框無法正常工作

Question

我在手風琴標題內有一個復選框，如下所示

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