Фильтрация RadListView с использованием пользовательского условия поиска - PullRequest
Новая
       86

Фильтрация RadListView с использованием пользовательского условия поиска

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

Можно ли передать функцию фильтрации в Angular Nativescript RadListView, который может обращаться к локальной переменной searchTerm?Я пробовал на примере, расположенном при условии здесь , однако этот пример предлагает статический поисковый термин.

То, что я хочу сделать, отличается от функции фильтра семплов;*

Пример 

this.myFilteringFunc = (item: DataItem) => {
    return item && item.name.includes("Special Item");
};

Я изменяю поисковый термин "Special Item" в текстовое поле, введенное пользователем.Я пробовал:

TypeScript 

  // on inital load....
  this.resultsFound = this._dataItems 
                      && this._dataItems.length > 0 
                      && this._dataItems.filter(c => (c.Firstname && c.FirstName.includes(this.searchTerm)) 
                                                    || (c.LastName && c.LastName.includes(this.searchTerm))
                                                ).length > 0;
  if (this.searchTerm.length > 0) {
      if(this.resultsFound) listView.filteringFunction = this.filterByName.bind(this);
  } 
  else {
      listView.filteringFunction = undefined;
  }



//...later, I define the filtering function like so;
filterByName(item: NameListViewModel) {
    if (!this.searchTerm){
      return true;
    }
    return item 
            && ((item.FirstName && item.FirstName.includes(this.searchTerm))
                || (item.LastName && item.LastName.includes(this.searchTerm)));

};

Просмотр 

<RadListView #myListView row="0" *ngIf="resultsFound" [items]="dataItems" [groupingFunction]="groupByAge" (itemLoading)="onItemLoading($event)">
    <ng-template tkListItemTemplate let-item="item" let-i="index">
        <StackLayout class="person-card">
            <app-person-register-list-item [item]="item"></app-person-register-list-item>
        </StackLayout>
    </ng-template>
    <ng-template tkGroupTemplate let-category="category">
        <StackLayout orientation="horizontal" [ngClass]="{'neutral-background':getCount(category)==''}" [ngClass]="{'grouping-header':getCount(category)!=''}" ios:height="50">                        
            <Label class="person-group-header" text="{{formatCategory(category)}}"></Label>
            <Label class="person-number" text="{{getCount(category)}}" verticalAlignment="center"></Label>
        </StackLayout>
    </ng-template>
</RadListView>

1 Ответ

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

Вы можете просто использовать канал фильтра с привязкой свойства items. 

<RadListView [items]="dataItems | filter:filterText" ...>

filterText может быть вашим динамическим вводом.Труба фильтра может выглядеть как 

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

@Pipe({
    name: "filter"
})
export class FilterPipe implements PipeTransform {

    transform(source: any, filterText: string): any {
        if (!filterText) {
            return source;
        }

        const result: Array<any> = new Array<any>(),
            filterReg: RegExp = new RegExp(filterText, "i");

        source.forEach((item) => {
            if (filterReg.test(item.title)) {
                result.push(item);
            }
        });

        return result;
    }
}
...