问题
In Angular 1, there is filter attribute along with ng-repeat
as mentioned here.
But in Angular 2 there is new functionality named "pipe". I have used pipes already but still I can't search through all properties like in the Angular 1 version.
However it is working fine for any 1 property, but for whole array, it's not working.
I got following error when i search something.
ERROR TypeError: Cannot read property 'includes' of null at http://localhost:8100/build/main.js:118751:76 at Array.some (native) at http://localhost:8100/build/main.js:118751:42 at Array.filter (native) at FilterPipe.transform (http://localhost:8100/build/main.js:118750:26) at checkAndUpdatePureExpressionInline (http://localhost:8100/build/main.js:11519:38) at checkAndUpdateNodeInline (http://localhost:8100/build/main.js:12374:17) at checkAndUpdateNode (http://localhost:8100/build/main.js:12336:16) at debugCheckAndUpdateNode (http://localhost:8100/build/main.js:12965:59) at debugCheckDirectivesFn (http://localhost:8100/build/main.js:12906:13) at Object.eval [as updateDirectives] (ng:///AppModule/Orders.ngfactory.js:628:46) at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/main.js:12891:21) at checkAndUpdateView (http://localhost:8100/build/main.js:12303:14) at callViewAction (http://localhost:8100/build/main.js:12618:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12564:13)
ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 43, nodeDef: Object, elDef: Object, elView: Object}component: (...)componentRenderElement: (...)context: (...)elDef: ObjectbindingFlags: 2bindingIndex: 6bindings: Array(1)childCount: 1childFlags: 73728childMatchedQueries: 0directChildFlags: 73728element: Objectflags: 1index: 42matchedQueries: ObjectmatchedQueryIds: 0ngContent: nullngContentIndex: 0outputIndex: 3outputs: Array(0)parent: Objectprovider: nullquery: nullreferences: ObjectrenderParent: Objecttext: null__proto__: ObjectelOrCompView: (...)elView: Objectinjector: (...)nodeDef: ObjectnodeIndex: 43providerTokens: (...)references: (...)renderNode: (...)view: Object__proto__: Object
Below is my code for reference:
1) FilterPipe.ts
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term) {
// THIS IS WORKING BUT FOR ONLY order_id PROPERTY
// return items.filter(function (item) {
// return item.order_id.toLowerCase().includes(term.toLowerCase());
// });
// THIS IS NOT WORKING
return items.filter(item => {
return Object.keys(item).some(k => item[k].includes(term.toLowerCase()));
});
}
return items;
}
}
2) Orders.html
<ion-header style="direction: ltr;">
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only (click)="logout()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
<ion-title>הזמנה</ion-title>
<ion-buttons start>
<button ion-button icon-only (click)="getOrders()">
<ion-icon name="refresh"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only (click)="showFilterBar()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ul class="list" *ngFor="let order of orders | filter : Search.value">
<li class="item {{order.color}}" (click)="gotoorderdetails(order)">
<div style="float:left;">
{{order.start_date}}<br/>
</div>
<b>{{order.order_id}} </b> צ - {{order.total_staff}} ימ- {{order.number_of_days}}<br/><br/> {{order.full_name}}
<br/>
<div style="float:left;">
{{order.managers}}<br/>
</div>
<span *ngIf="order.event_location"> {{order.event_location}}<br/></span>
</li>
</ul>
</ion-content>
<ion-footer>
<ion-searchbar #Search (keyup)="0"></ion-searchbar>
</ion-footer>
How can I use the ionic filter bar in ionic 2.
回答1:
Thanks JB Nizet for an answer.
Below is my working updated code.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term) {
return items.filter(item => {
return Object.keys(item).some(
k => {
if (item[k] != null && item[k] != undefined && typeof item[k] == 'string')
return item[k].includes(term.toLowerCase());
}
);
});
}
return items;
}
}
来源:https://stackoverflow.com/questions/43297803/angular-2-search-filter-works-for-one-property-but-not-for-all-properties-of-an