Angular 6 + Bootstrap 4全选和取消全选复选框

Question

我在尝试使用Angular 6+中的Bootstrap 4复选框实现全选和取消全选的功能时遇到了问题。当我使用这里的原始代码时，它可以正常工作： http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html 但问题在于Bootstrap使用不同的事件来点击复选框。有人有解决方案吗？

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

还有TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
  title = 'Checkbox';
  names: any;
  selectedAll: any;
  constructor() {
    this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]

  }
  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

  ngOnInit() {
  }
}

- Robert Wojtow

Answer 1

应该可以了

这里是一个 plnkr：https://next.plnkr.co/edit/ypGmwE32Xn1bgbqd?preview

HTML：

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="n.selected" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {


    title = 'Checkbox';
  names: any;
  selectedAll: any;
  selectedNames: any;
    constructor() {
          this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]
    }
    selectAll() {
        this.selectedAll = !this.selectedAll;

        for (var i = 0; i < this.names.length; i++) {
            this.names[i].selected = this.selectedAll;
        } 
  }
  checkIfAllSelected() {
      var totalSelected =  0;
      for (var i = 0; i < this.names.length; i++) {
            if(this.names[i].selected) totalSelected++;
        } 
    this.selectedAll = totalSelected === this.names.length;

  return true;
  }

  ngOnInit() {
  }
}

- racamp101

Answer 2

我不确定Bootstrap在复选框的事件绑定方面是否有任何特殊逻辑。我猜你的代码中缺少这个。要进行绑定，请参见以下片段：

<form [formGroup]="form">
    <div class="form-check" formArrayName="unitArr">
                        <input class="form-check-input" type="checkbox" [checked]="checkAllSelected()" 
         (click)="selectAll($event.target.checked)" id="select-all">
                        <label class="form-check-label" for="select-all">
                            Select All
                        </label>
                    </div>
                    <div class="form-check" *ngFor="let n of names; let i = index;" >
                        <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()" [attr.id]="'check' + i">
                        <label class="form-check-label" [attr.for]="'check' + i">
                            {{n.name}}
                        </label>
                    </div>
</form>

checkAllSelected() {
  return this.form.controls.unitArr.controls.every(x => x.value == true)
}

selectAll(isChecked) {
  if isChecked 
     this.form.controls.unitArr.controls.map(x => x.patchValue(true))
  else
     this.form.controls.unitArr.controls.map(x => x.patchValue(false))
}

输入框的"id"属性需要通过"for"属性映射到"label"标签。我不确定您是否有任何特殊要求，但这是非常基本的HTML概念。请尝试一下，看看是否解决了您的问题。

编辑：请注意，我不熟悉Angular6的概念，但上述代码确实适用于Angular 2。您可以检查上述任何一点是否能在任何方面帮助您。祝你好运！

- Charu Maheshwari

---

所以现在第二个框可以选择全部而不是第一个，其他的也不能选择。有什么想法吗？ - Robert Wojtow

这并没有回答他的问题。虽然你关于需要参考的正确，但如果他想要文本也选中复选框，那么问题中并没有要求这样做。 - racamp101

@racamp101请再次阅读我上面提到的“我不确定bootstrap是否有任何特殊逻辑来绑定复选框中的事件”！！！并且请阅读Robert上面的评论，这个逻辑确实帮助他解决了问题，因为他的代码中缺少了这个基本处理。谦虚的建议，在投票之前请考虑提问者的关注点！ - Charu Maheshwari