Angular 2复选框全部检查

发布时间：2020-12-17 07:12:08 所属栏目：安全来源：网络整理

导读：我有一个列表来检查项目名称.在底部我想放置一个复选框来检查或取消选中它们.我想我需要一个* ngIf(如果选中)带有* ngFor循环(全部检查),但这是一个挑战……我无法弄清楚我应该如何处理这个问题.我是否使用(选中)或某些内容或* ngIf =“(选中)”然后使用* ng

我有一个列表来检查项目名称.在底部我想放置一个复选框来检查或取消选中它们.我想我需要一个* ngIf(如果选中)带有* ngFor循环(全部检查),但这是一个挑战……我无法弄清楚我应该如何处理这个问题.我是否使用(选中)或某些内容或* ngIf =“(选中)”然后使用* ngFor循环来设置project.isChecked.我无法理解这一点.

<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>

解决方法

我会在“check / uncheck all”复选框上使用一个控件,以便在用户选中或取消选中时收到通知：

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

allCtrl在组件的构造函数中初始化.然后,您可以注册此控件的valueChanges属性以通知更新并相应地更新isChecked字段：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!