如何選擇所有復選框，但不選擇特定復選框？

Question

我創建一個復選框列表並創建另一個復選框，當我單擊該復選框時，所有列出的復選框都被選中，但是當我取消選中一個復選框時，所有復選框都未被選中。 這是我的代碼：

    <input type="checkbox" class="custom-control-input" (change)="inviteAll()" [(ngModel)]="checked">
    <ul>
    <li class="peopleselectlist-item" *ngFor="let connection of connections">
        <img *ngIf="connection.imageUrl === '' || connection.imageUrl === null" src="assets/images/default_user.png" alt="" class="connection-img">
        <img *ngIf="connection.imageUrl !== '' && connection.imageUrl !== null" src="{{connection.imageUrl}}" alt="" class="connection-img">
         <h5>{{connection.firstName}}</h5>
         <label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" value="{{connection.userId}}" (change)="tagUser(connection.userId)" [(ngModel)]="checked">
  <span class="custom-control-indicator"></span></label> </li> <ul>

如何解決這個問題呢。 當我選擇一個checkox時，僅取消選中該復選框。

Answer 1

嘗試添加索引值以確保唯一性。 像這樣：

*ngFor="let connection of connections;let i = index"

並將[(ngModel)]="checked"更改為[(ngModel)]="checked[i]"並在ts / js文件中創建checked數組。 另外，請嘗試在復選框字段中id={{i}} 。