Фильтр ToolBar для стола - PullRequest
Новая
       7

Фильтр ToolBar для стола

0 голосов
/ 18 января 2019

У меня есть user[] объект, который получает данные от API. Я пытаюсь отфильтровать данные на основе fullName (свойство объекта), на keyup.enter он вызывает filterUser() функцию. где я написал свою логику фильтра. Данные получают фильтр, но Angular не может его отобразить, я не знаю, что я делаю неправильно.

Я сохраняю свои отфильтрованные данные в объекте filterData типа User[].

User-list.html 

<div *ngIf="users?.length > 0">
<div> <input type="text" (keyup.enter)="filterUser($event)"> </div> <!--function triggering here-->
<div *ngFor="let item of items">
{{item.attribute.fullName}}
</div>
</div>

User-list.component.ts 

// assuming users has some data
items: User[]
filterData: User[];
 filterUser( searchTerm: string) {
    this.filterCount = 0;
    console.log('searchTerm', searchTerm);
    console.log(typeof(this.items));
    if (!this.items || !searchTerm) {
      return this.items;
    }
    for (let i = 0; i < this.items.length; i++) {
      if (this.items[i].attributes.fullName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {         this.filterData[i].attributes.fullName = this.items[i].attributes.fullName;
        this.filterCount++;
      }
    }
    this.items = this.filterData;// I'm not able to copy data back to this.items
  }

Я не знаю, что мне не хватает. Нужно ли использовать ngOnChanges()?.

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Вы можете отфильтровать его, создав пользовательский канал

filter.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        searchText=searchText
        if(!items){ return ;}
        if(!searchText){
            return items;
        }
        return items.filter( it => {
            return it['fullName'].toLowerCase().includes(searchText);
        });
    }
}

Зарегистрируйте канал в файле app.module.ts 

import {
  FilterPipe
} from 'PipePath'; //give the path of custom created pipe

declarations: [...,FilterPipe],

user-list.html 

<div *ngIf="users?.length > 0">
<div> <input type="text" (keyup.enter)="filterUser($event)" [(ngModel)]="search"> </div>
<div *ngFor="let item of items | filter : search">
{{item.attribute.fullName}}
</div>
</div>

Объявление переменной поиска в файле ts при использовании ngModel.

user-list.ts 

search;

Это решит вашу проблему.

0 голосов
/ 18 января 2019

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

class Test {
    // assuming users has some data
    constructor() {
        this.items = [
            { attributes: { fullName: 'toto1' } },
            { attributes: { fullName: 'toto2' } },
            { attributes: { fullName: 'tutu3' } }
        ];
        this.filterData = [];
    }
    filterUser(searchTerm) {
        this.filterCount = 0;
        console.log('searchTerm', searchTerm);
        console.log(typeof (this.items));
        if (!this.items || !searchTerm) {
            return this.items;
        }
        for (let i = 0; i < this.items.length; i++) {
            if (this.items[i].attributes.fullName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
                this.filterData[i] = { ...this.items[i] }; // Copy full object using spread operator
                this.filterCount++;
            }
        }
        this.items = this.filterData;// I'm not able to copy data back to this.items
    }
}
let test = new Test();
test.filterUser('toto');
console.log(test.items);
...