Angular 2搜索過濾器適用於數組的一個屬性，但不適用於數組的所有屬性

Question

在Angular 1中，這里提到了 filter屬性和ng-repeat 。

但是在Angular 2中，有一個名為“ pipe”的新功能。 我已經使用過管道，但是仍然無法像Angular 1版本那樣搜索所有屬性。

但是，它對於任何1個屬性都可以正常工作，但對於整個數組，則不能正常工作。

搜索某些內容時出現以下錯誤。

錯誤TypeError：無法讀取Array.some（本地）的http：// localhost：8100 / build / main.js：118751：76的null的屬性'includes'（位於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（位於Object.eval的debugCheckDirectivesFn（ http：// localhost：8100 / build / main.js：12906：13 ）的http：// localhost：8100 / build / main.js：12965： 59 ）（作為updateDirectives）（ng： ///位於App.ulebugUpdateDirectives的AppModule / Orders.ngfactory.js：628： 46 [作為updateDirectives]（ http：// localhost：8100 / build / main.js：12891：21 ）在checkAndUpdateView（ http：// localhost ：8100 / build / main.js：12303：14 ）在execCompone上的callViewAction（ http：// localhost：8100 / build / main.js：12618：17 ） ntViewsAction（ http：// localhost：8100 / build / main.js：12564：13 ）

錯誤上下文DebugContext_ {視圖：對象，nodeIndex：43，nodeDef：對象，elDef：對象，elView：對象} component：（...）componentRenderElement：（...）context：（...）elDef：ObjectbindingFlags：2bindingIndex ：6綁定：Array（1）childCount：1childFlags：73728childMatchedQueries：0directChildFlags：73728element：Objectflags：1index：42matchedQueries：ObjectmatchedQueryIds：0ngContent：nullngContentIndex：0outputIndex：3outputs：Array（0）parent：Objectprovider：nullquery：nullent ：ObjectelOrCompView：（...）elView：Objectinjector：（...）nodeDef：ObjectnodeIndex：43providerTokens：（...）引用：（...）renderNode：（...）view：Object__proto__：Object

下面是我的代碼供參考：

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>

如何在離子2中使用離子濾棒 。

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