如何在角度2中选择ngFor内的所有筛选复选框?

前端之家收集整理的这篇文章主要介绍了如何在角度2中选择ngFor内的所有筛选复选框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个Angular 2组件,它加载并显示* ngFor中的用户的复选框列表,该列表也可以根据键过滤.我需要选择所有过滤的项目并将它们添加到数组中.我可以检查所有的复选框,但问题是当我更改检查有问题的更改事件不触发,任何想法如何解决这个问题?

模板:

  1. <div class="form-group">
  2. <input type="text" class="form-control" id="stringKeyFilter" placeholder="Key Filter"
  3. [(ngModel)]="keyFilter">
  4. </div>
  5.  
  6. <table class="table table-striped table-hover">
  7. <thead>
  8. <tr>
  9. <th>Id</th>
  10. <th style="width: 150px;">Action</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr *ngFor="let device of devices| stringFilter: keyFilter">
  15. <td>
  16. {{device.$key}}
  17. </td>
  18. <td>
  19. <div class="checkBox">
  20. <label> <input type="checkBox"
  21. [checked]="selectAll || selectedDevices.indexOf(device.$key) > -1"
  22. (change)="updateSelectedDevices(device.$key,$event)" > View</label>
  23. </div>
  24. </td>
  25. </tr>
  26. </tbody>
  27. </table>
  28.  
  29. <div class="btn-group pull-right">
  30. <button type="button" class="btn btn-primary" (click)="selectAllDevices()">Select All</button>
  31. <button type="button" class="btn btn-default" (click)="deselectAllDevices()">Deselect All
  32. </button>
  33. </div>

零件:

  1. @Component({
  2. moduleId: module.id,selector: 'device-list',template: template
  3. })
  4. export class DeviceListComponent implements OnInit {
  5. devicesObservable: FirebaseListObservable<Device[]>;
  6. devices: Device[] = [];
  7. isLoading: boolean = true;
  8. selectedDevices: string[] = [];
  9. selectAll: boolean = false;
  10. allCtrl: any;
  11.  
  12. keyFilter: string = '';
  13.  
  14. constructor(private af: AngularFire) {
  15.  
  16. }
  17.  
  18. ngOnInit(): void {
  19.  
  20.  
  21. this.devicesObservable = this.af.database.list('/online',{
  22. query: {
  23. orderByKey: true,}
  24. });
  25. this.devicesObservable.subscribe((devicesData)=> {
  26. this.devices = devicesData;
  27. this.isLoading = false
  28. });
  29. }
  30.  
  31. updateSelectedDevices(deviceId: string,event): void {
  32. if (event.target.checked) {
  33. this.selectedDevices.push(deviceId);
  34. }
  35. else {
  36. _.pull(this.selectedDevices,deviceId);
  37. }
  38. }
  39.  
  40.  
  41. loadingDeviceDetail(loading: boolean): void {
  42. this.isLoading = loading;
  43. }
  44.  
  45. selectAllDevices(): void {
  46. this.selectAll = true;
  47. }
  48.  
  49. deselectAllDevices(): void {
  50. this.selectAll = false;
  51. this.selectedDevices = [];
  52. }
  53.  
  54. }

更新

更新示例代码和空格以演示选择/取消选中所有过滤列表的复选框.

根据我的理解,过滤器行为从Angular1改变为Angular2.

在Angular1中,当数据或过滤器参数被修改时,DOM(网页)将被重新计算. (我也许错了,太久以前:P)

在Angular2中,简而言之,修改数据(数组)不会触发过滤器的计算,所以没有新的结果,不会更新到DOM.

长期和正式的解释在这里:Angular2 Pipes – ts.如果您坚持在模板中使用管道(过滤器),您应该探索文档中不纯的管道部分.

另一个解决方案是不要使用带* ngFor的过滤器.创建过滤的列表.

Plunker

http://plnkr.co/edit/pEpaj0?p=preview

示例代码

app.component.ts

  1. import {Component} from '@angular/core';
  2. import {bootstrap} from '@angular/platform-browser-dynamic';
  3.  
  4. @Component({
  5. selector: 'material-app',templateUrl: 'app.component.html'
  6. })
  7. export class AppComponent {
  8.  
  9. title='How to select all filtered checkBoxes inside ngFor in Angular 2?';
  10. url='https://stackoverflow.com/questions/39703103/';
  11.  
  12. device = [
  13. {'name':'abc','checked':false},{'name':'abcd',{'name':'abcde',{'name':'abc123',{'name':'abc1234','checked':false}];
  14.  
  15. deviceFilter = '';
  16.  
  17. deviceFiltered = this.device.slice(0);
  18.  
  19. selectFiltered(){
  20. this.deviceFiltered.forEach(i=>i.checked=true);
  21. }
  22.  
  23. deSelectFiltered(){
  24. this.deviceFiltered.forEach(i=>i.checked=false);
  25. }
  26.  
  27. onFilterChange(){
  28. if (this.deviceFilter.length > 0) {
  29. this.deviceFiltered = this.device.filter(i => i.name.indexOf(this.deviceFilter) > -1);
  30. console.log(this.deviceFiltered);
  31. } else {
  32. this.deviceFiltered = this.device.slice(0);
  33. }
  34. }
  35. }

app.component.html

  1. <h2><a [href]="titleUrl">{{title}}</a></h2>
  2.  
  3. <div>
  4. Filter
  5. <input [(ngModel)]="deviceFilter" (ngModelChange)="onFilterChange()">
  6. </div>
  7.  
  8. <div>
  9. List:
  10. <ul>
  11. <li *ngFor="let i of device">
  12. <input type="checkBox" [(ngModel)]="i.checked">{{i.name}}
  13. </li>
  14. </ul>
  15. </div>
  16.  
  17. <div>
  18. Filtered List:
  19. <ul>
  20. <li *ngFor="let i of deviceFiltered">
  21. <input type="checkBox" [(ngModel)]="i.checked">{{i.name}}
  22. </li>
  23. </ul>
  24. <button (click)="selectFiltered()">Select Filtered</button>
  25. <button (click)="deSelectFiltered()">Deselect Filtered</button>
  26. </div>

猜你在找的Angularjs相关文章