Casella Angolare 2 controlla tutto

Question

Ho una lista per verificare i nomi dei progetti. In basso voglio posizionare una casella per spuntare o deselezionare tutti. Penso di aver bisogno di un * ngIf (se controllato) con un ciclo * ngFor (controlla tutto) ma questa è la vera sfida ... Non riesco a capire come dovrei procedere con questo. Uso (selezionato) o qualcosa o * ngIf = "(selezionato)" e quindi utilizzo un ciclo * ngFor per impostare project.isChecked. Non riesco a entrare nella logica di questo.

<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

userei un controllo sulla casella di controllo "selezionare/deselezionare tutti" per essere avvisati quando i controlli utente o deselezionata:

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

allCtrl viene inizializzato all'interno del costruttore del componente. Poi si potrebbe registrare contro la proprietà di questo controllo valueChanges da notificare gli aggiornamenti e aggiornare i isChecked campi di conseguenza:

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