根据复选框值动态更改文本

Question

使用FormArray我在我的组件上绑定了复选框，复选框的默认label是select ，当我单击复选框时， label selectAll改为选中的每个复选框的所有复选框（所有复选框的更改true ）并将文本更改为selected ，我的问题是：

• 当我 select 只有一个复选框时，更改label也会影响其他复选框
• 当我有selectAll复选框时，所有复选框 label 将更改为选中，然后如果我取消选中单个复选框，它应该将label更改为select

这是我尝试过的：

html文件

<div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"
        (change)="checkedState(summon)">
            {{ summonText }}
           </ng-container>
       </ng-container>
   </form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

ts文件

    checkedState(summon) {
    summon.checked = !summon.checked;
    this.summonText = summon.checked === true ? 'selected' : 'select';
  }

  selectAll() {
    this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
    return this.summonText = 'selected';
  }

这是我完整的 stackblitz 演示，我可以使用一些建议和更好的实践来解决这个问题

Answer 1

<div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked">
  {{ summon.get('isChecked').value ? 'selected' : 'select' }}
      </ng-container>
    </ng-container>
</form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

https://stackblitz.com/edit/angular-43suh3?file=src/app/inquiry-response/inquiry-response.component.html

Answer 2

我做了一些改变，你可以试试这个：

HTML

<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroupName]="i">
            <input type="checkbox" [checked]="summon.checked" formControlName="isChecked"
    (change)="checkedState(summon)">
       {{ summon.checked === true ? 'selected' : 'select' }}
    </ng-container>
 </ng-container>
</form>
 <!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

在函数中：

selectAll() {
 this.formReceivedSummons.controls.map((summon: any) => {
  summon.checked = true;
 });
}
checkedState(summon) {
 summon.checked = !summon.checked;
}