Angular 2 搜索过滤器适用于一个属性，但不适用于数组的所有属性

Question

在 Angular 1 中，ng-repeat 和 here 中提到的过滤器属性。

但在 Angular 2 中，有一个名为 “管道” 的新功能。我已经使用过管道，但仍然无法像 Angular 1 版本那样搜索所有属性。

但是对于任何 1 个属性它都可以正常工作，但对于整个数组，它不起作用。

我在搜索某些内容时遇到以下错误。

错误类型错误：无法读取 null 的属性“包含” 在http://localhost:8100/build/main.js:118751:76 在 Array.some (native) 在http://localhost:8100/build/main.js:118751:42 在 Array.filter （本机） 在 FilterPipe.transform (http://localhost:8100/build/main.js:118750:26) 在 checkAndUpdatePureExpressionInline (http://localhost:8100/build/main.js:11519:38) 在 checkAndUpdateNodeInline (http://localhost:8100/build/main.js:12374:17) 在 checkAndUpdateNode (http://localhost:8100/build/main.js:12336:16) 在 debugCheckAndUpdateNode (http://localhost:8100/build/main.js:12965:59) 在 debugCheckDirectivesFn (http://localhost:8100/build/main.js:12906:13) 在 Object.eval [as updateDirectives] (ng:///AppModule/Orders.ngfactory.js:628:46) 在 Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/main.js:12891:21) 在 checkAndUpdateView (http://localhost:8100/build/main.js:12303:14) 在 callViewAction (http://localhost:8100/build/main.js:12618:17) 在 execComponentViewsAction (http://localhost:8100/build/main.js:12564:13)

ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 43, nodeDef: Object, elDef: Object, elView: Object}组件： (...)componentRenderElement: (...)context: (...)elDef: ObjectbindingFlags：2bindingIndex：6bindings：Array（1）childCount： 1childFlags：73728childMatchedQueries：0directChildFlags： 73728元素：对象标志：1索引：42matchedQueries： ObjectmatchedQueryIds：0ngContent：nullngContentIndex：0outputIndex： 3 个输出： Array(0)parent：Objectprovider：nullquery：nullreferences： ObjectrenderParent：Objecttext：null__proto__：ObjectelOrCompView： (...)elView: Objectinjector: (...)nodeDef: ObjectnodeIndex: 43providerTokens: (...)references: (...)renderNode: (...)view: Object__proto__: 对象

以下是我的参考代码：

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> &nbsp;&nbsp;&nbsp;צ - {{order.total_staff}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ימ- {{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>

如何在 ionic 2 中使用 ionic filter bar。

Answer 1

感谢JB Nizet 的回答。

以下是我的工作更新代码。

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;
    }
}