Как выбрать все фильтрованные флажки внутри ngFor в Angular 2?

Ответ 1

Update

Обновлен пример кода и plunker для демонстрации выбора/отмены выбора всех флажков для отфильтрованного списка.

По моему мнению, поведение фильтра изменилось с Angular1 на Angular2.

В Angular1, когда изменяется параметр данных или фильтра, DOM (веб-страница) будет пересчитана. (Возможно, я ошибаюсь слишком давно: P)

В Angular2, короче говоря, изменение данных (массива) не приведет к вычислению фильтра, поэтому новый результат не будет обновлен до DOM.

Долгое и официальное объяснение здесь: Angular2 Трубы - ts. Если вы настаиваете на использовании трубы (фильтра) в шаблоне, вам следует изучить раздел нечистый канал в документе.

Другое решение - не использовать фильтр с *ngFor. Вместо этого создайте отфильтрованный список.

Plunker

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

Пример кода

app.component.ts

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  title='How to select all filtered checkboxes inside ngFor in Angular 2?';
  url='http://stackoverflow.com/questions/39703103/';

  device = [
    {'name':'abc','checked':false},
    {'name':'abcd','checked':false},
    {'name':'abcde','checked':false},
    {'name':'abc123','checked':false},
    {'name':'abc1234','checked':false}];

  deviceFilter = '';

  deviceFiltered = this.device.slice(0);

  selectFiltered(){
    this.deviceFiltered.forEach(i=>i.checked=true);
  }

  deSelectFiltered(){
    this.deviceFiltered.forEach(i=>i.checked=false);
  }

  onFilterChange(){
    if (this.deviceFilter.length > 0) {
      this.deviceFiltered = this.device.filter(i => i.name.indexOf(this.deviceFilter) > -1);
      console.log(this.deviceFiltered);
    } else {
      this.deviceFiltered = this.device.slice(0);
    }
  }
}

app.component.html

<h2><a [href]="titleUrl">{{title}}</a></h2>

<div>
  Filter
  <input [(ngModel)]="deviceFilter" (ngModelChange)="onFilterChange()">
</div>

<div>
  List:
  <ul>
    <li *ngFor="let i of device">
      <input type="checkbox" [(ngModel)]="i.checked">{{i.name}}
    </li>
  </ul>
</div>

<div>
  Filtered List:
  <ul>
    <li *ngFor="let i of deviceFiltered">
      <input type="checkbox" [(ngModel)]="i.checked">{{i.name}}
    </li>
  </ul>
  <button (click)="selectFiltered()">Select Filtered</button>
  <button (click)="deSelectFiltered()">Deselect Filtered</button>
</div>

Ответ 2

Когда вы пытаетесь выбрать все устройства, ваш основной список не обновляется, ничего не изменилось, а angular не обнаруживает изменений на нем. (Существует обновленный флаг, но список тот же). У вас есть два варианта:

• Поместите флаг в каждый элемент, отмеченный в списке.
• Запуск ручного рендеринга с помощью ApplicationRef.tick() https://angular.io/docs/ts/latest/api/core/index/ApplicationRef-class.html#!#tick-anchor

Ответ 3

Примечание. Ваш код может отличаться, поскольку я внес некоторые изменения, чтобы получить только рабочее приложение. Получите соответствующую часть из фрагментов кода и примените.

Вот рабочий код для вашего вопроса.

Ниже приведены изменения, которые необходимо внести в ваш код.

<input type="checkbox"  [checked]="selectedDevices.indexOf(device.$key) > -1"
                               (change)="updateSelectedDevices(device.$key, $event)" >

Измените функцию select all следующим образом.

selectAllDevices(): void {
    this.selectedDevices = this.strFilter(this.devices, this.keyFilter).map(dev=>dev.$key); 
  }

Примечание: this.strFilter - это функция фильтра в классе/функции компонента. Это зависит от вашего класса Filter. Я создал фильтр/трубу, как это.

//stringfilter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'stringFilter'})
export class StringFilter implements PipeTransform {
  transform(value: Array<any>, filterKey: string): Array<any> {
    return (
      filterKey ? value.
        filter(el => (el.name).toLowerCase().includes(filterKey))
        : value
    );
  }
}

В классе компонентов мне понравилось // класс компонента

import {StringFilter} from './filter-file'

и

ngOnInit(): void {

    this.strFilter = new StringFilter().transform;
    //this.devices = [];
    this.isLoading = false;

  }

Я проверил следующий код. Надеюсь, это решает вашу проблему.