Angular listens for changes in input single-selection and multi-selection values

<ng-template ngFor [ngForOf]="checklist" let-item let-i="index">
            <div class="ui checkbox">
              <input type="checkbox" name="status" [checked]="item.isChecked">
              <label for="wait-loan-id" class="Settlement">{{item.name}}<span class="black">({{item.cnt}})</span></label>
            </div>
          </ng-template>

the effect of the page is as follows:

The code for

clipboard.png
ts looks like this:

getCheckList(): void {
    let statusList: any = [
      { name: "", value: 0, cnt: 0 },
      { name: "", value: 2, cnt: 0 }
    ];
    statusList.map((item) => {
      return item.isChecked = true;
    });
    this.checklist = statusList;
  }
chooseStatuses(event, index): void {
    let { value, checked } = event.target;
    this.toggleItemStatuses(checked, value, index);
  }

subscript status
when I send a request, I need to determine whether the check of the status is to select all or single. If I select all, I need
org/apply?status=0&status=2 to request from the backend. If I choose one, I will monitor the change of the input value. But I will not, and the logic of judging the status of the single selection and selecting or canceling the current state is not very clear. Ask for help from the boss!

Oct.21,2021

I can't believe I didn't understand the code you wrote. We also need to understand more about two-way binding, and we can't think about it with the idea of jquery. I wrote

directly without using template,.
    public list =  [{n:'t1', v:'t1', c: false}, {n:'t2', v:'t2', c: false}];
    onCheckChange() {
        console.log(this.list);
    }
    //HTML
    <ul>
        <li *ngFor="let item of list">
            <input type="checkbox" [(ngModel)]="item.c" (change)="onCheckChange()" />{{item.n}}
        </li>
    </ul>

the change event here is just print debugging and is of no use (unless you have extra logic for the result of checkbox multi-selection). You'll understand after you run it.


1. Personal understanding is that there is a problem with the map method, and map can be interrupted by return;
2. You don't need to use event, when listening to checkbox, because it is a single binding of'[]'. When you submit it, you traverse the checklist array to determine which group is selected.

Menu