Eckig 2 Kontrollkästchen alle überprüfen

Question

Ich habe eine Liste, um Projektnamen zu überprüfen. Auf der Unterseite möchte ich ein Kontrollkästchen setzen, um alle zu aktivieren oder zu deaktivieren. Ich denke, ich brauche ein * ngIf (wenn aktiviert) mit einer * ngFor-Schleife (überprüfen Sie alle), aber das ist ziemlich die Herausforderung ... Ich kann nicht herausfinden, wie ich damit fortfahren sollte. Benutze (checked) oder etwas oder * ngIf = "(checked)" und verwende dann eine * ngFor-Schleife, um project.isChecked zu setzen. Ich komme nicht in die Logik davon.

<div id="drp-project-select"> 
     <div class="scroller" [hidden]="!showMenu"> 
      <div id="search-wrapper"> 
       <i class="fa fa-search fa-xs"></i> 
       <input [(ngModel)]="searchTerm" type="text" placeholder="Zoek op naam..." #search> 
      </div> 
      <ul> 
       <li *ngFor="#project of projectdata.LoginResponse?.ProjectVM | searchpipe:'Project':search.value"> 
        <label class="checkbox-label" > 
         <input type="checkbox" class="dropdown-checkbox" [(ngModel)]="project.isChecked" (change)="addProject(project)" > 
         <span>{{project.Project}}</span> 
        </label> 
       </li> 
      </ul> 
     </div> 
     <div class="bottom-data" [hidden]="!showMenu"> 
      <label><input type="checkbox" id="bottom-checkbox"></label> 
     </div> 
    </div> 

Answer 1

würde ich eine Kontrolle über die Verwendung „aktivieren/deaktivieren alle“ Checkbox benachrichtigt werden, wenn der Benutzer aktiviert bzw. deaktiviert:

<input type="checkbox" [ngFormControl]="allCtrl"/> 

allCtrl im Konstruktor der Komponente initialisiert wird. Dann könnten Sie sich registrieren gegen die valueChanges Eigenschaft dieser Kontrolle werden von Updates informiert und aktualisiert die isChecked Felder entsprechend: „unerwartetes Token“

constructor() { 
    this.allCtrl = new Control(); 
    this.allCtrl.valueChanges.subscribe(
    (val) => { 
     this.projectdata.LoginResponse.ProjectVM.forEach((project) => { 
     project.isChecked = val; 
     }); 
    }); 
}