Angular 2 Pipe - Impossible de lire la propriété 'toString' de undefined

Question

J'ai une configuration de tube de recherche dans l'angle 2. Le tube de recherche fonctionnait parfaitement quand j'étais sur la version bêta 14 angulaire, maintenant j'ai mis à jour vers rc5 et le tube de recherche est cassé et j'obtiens l'erreur. Si je retire le tuyau du code html les produits se chargent. C'est un tube de recherche et de filtrage générique qui devrait être utilisé dans de nombreux modules. S'il vous plaît, aidez à résoudre le problème.

TypeError: Cannot read property 'toString' of undefined 
at SearchPipe.compareWithAllFields (http://localhost:4200/main.bundle.js:72117:57) 
at Array.filter (native) 
at SearchPipe.transform 

search.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 
import {isObject} from "rxjs/util/isObject"; 
import {isEmpty} from "rxjs/operator/isEmpty"; 
import {empty} from "rxjs/Observer"; 
@Pipe({ 
    name: 'search' 
}) 
export class SearchPipe implements PipeTransform 
{ 
    transform(input, [searchString]:Array<String>) 
    { 
     if (input == null) return input; 
     return input.filter(this.compareWithAllFields, searchString); 
    } 

    compareWithAllFields(value, index) 
    { 
     var fields = Object.keys(value); 
     for (let i = 0; i < fields.length; i++) 
     { 
      if (value[fields[i]] != null) 
      { 
       if (isObject(value[fields[i]])) 
       { 
        var childFields = Object.keys(value[fields[i]]); 
        if (childFields.length > 0) 
        { 
         for (let j = 0; j < childFields.length; j++) 
         { 
          if ((value[fields[i]][childFields[j]] + "").indexOf(this.toString()) !== -1) 
          { 
           return true; 
          } 
         } 
        } 
       } 
       if ((value[fields[i]] + "").indexOf(this.toString()) !== -1) 
       { 
        return true; 
       } 
      } 
     } 
     return false; 
    } 
} 

liste-products.component.html

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3 form-group"> 
      <input placeholder="search product" class="form-control" type="text" #searchProduct (keyup)="0"> 
     </div> 
     <div class="col-sm-3 col-sm-offset-6"> 
      <button [routerLink]="['/LoggedIn','Product','ProductAdd']" class="btn btn-lg btn-app">Add Product</button> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <h3>Products</h3> 
      <table class="table table-striped table-bordered"> 
       <thead> 
       <tr> 
        <th>Sr #</th> 
        <th>Name</th> 
        <th>Category</th> 
        <th>Barcode</th> 
        <th>Unit</th> 
        <th>Description</th> 
        <th>Quantity</th> 
        <th>Minimum Stock Level</th> 
        <th>Discount</th> 
        <th>Cost</th> 
        <th>Actions</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr *ngFor="let product of products | search:searchProduct.value;let serial = index"> 
        <td>{{ serial+1 }}</td> 
        <td>{{ product.name}}</td> 
        <td>{{ product.productCategory.name}}</td> 
        <td>{{ product.barcode}}</td> 
        <td>{{ product.unit?.name}}</td> 
        <td>{{ product.description}}</td> 
        <td>{{ product.quantity}}</td> 
        <td>{{ product.minimumStockLevel}}</td> 
        <td>{{ product.discount}}</td> 
        <td>{{ product.cost}}</td> 
        <td> 
         <button class="btn btn-danger" (click)="delete(product)">Delete</button> 
         <button class="btn btn-default" 
           [routerLink]="['/LoggedIn','Product','ProductEdit',{id:product.id}]">Edit 
         </button> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

Answer 1

@usmanwalana, l'API PIPE a changé depuis RC3/4, il retourne maintenant le 2ème paramètre comme une chaîne plutôt que d'un tableau.

changer Ainsi,

transform(input, [searchString]:Array<String>)

à

transform(input, searchString)

Answer 2

Je suppose que vous devez changer

return input.filter(this.compareWithAllFields, searchString); 

à

return input.filter(this.compareWithAllFields.bind(this), searchString); 

Answer 3

Solution: changement transform(input, [searchString]:Array<String>) à transform(input, searchString)