Hộp kiểm góc 2 kiểm tra tất cả

Question

Tôi có danh sách để kiểm tra tên dự án. Ở phía dưới, tôi muốn đặt một hộp kiểm để kiểm tra hoặc bỏ chọn tất cả. Tôi nghĩ rằng tôi cần một * ngIf (nếu kiểm tra) với một vòng lặp * ngFor (kiểm tra tất cả) nhưng điều này là khá thách thức ... Tôi không thể tìm ra cách tôi nên xử lý với điều này. Tôi có sử dụng (kiểm tra) hoặc một cái gì đó hoặc * ngIf = "(kiểm tra)" và sau đó sử dụng một vòng lặp * ngFor để thiết lập project.isChecked. Tôi không thể hiểu được điều này.

<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

Tôi sẽ sử dụng một điều khiển trên hộp kiểm "kiểm tra/bỏ chọn tất cả" để được thông báo khi kiểm tra người dùng hoặc unchecks:

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

allCtrl được khởi tạo trong constructor của các thành phần. Sau đó, bạn có thể đăng ký so với valueChanges tài sản của kiểm soát này để được thông báo về bản cập nhật và cập nhật các isChecked lĩnh vực phù hợp:

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