ein Rohr mit nicht definierten Anlauf unter Verwendung von Werten

Question

In meiner Pfeife Datei i

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

@Pipe({ 
    name: 'search' 
}) 
export class SearchPipe implements PipeTransform { 

    transform(service: any, term: any): any { 
    if (term=== undefined) return service.filter(function(service){ 
     return service.product_name.toLowerCase().includes("rustic".toLowerCase()); 
    }) 

    return service.filter(function(service){ 
     return service.product_name.toLowerCase().includes(term.toLowerCase()); 
    }) 
    } 
} 

i in dieser Vorlage über Rohr nennen diesen Code haben:

<div class="searchresult" *ngFor="let service of services |search:term "> 
       <div [routerLink]="['/searchresult',service.product_name]" class="searchitem">ID : {{ service.product_name }}</div><br> 
      </div> 

, wie zu wissen, dass service noch nicht fertig. Weil ich in meiner Anwendung Daten von Remote Rest API (in meinem VPS-Hosting) suchen möchte. Momentan muss ich ungefähr 30 Sekunden warten, bevor ich das Schlüsselwort eingeben kann, das an Pipe übergeben werden soll. Wenn ich es vor 30 Sekunden eintippe, schlägt die Suche meistens fehl mit Cannot read property 'filter' of undefined zurück. Dies liegt daran, dass die Rest-API noch nicht in den Dienst geladen wurde. wie man weiß, dass mein Dienst nicht bereits geladen, so kann ich die Sucheingabe bereit, bis Dienst sein disable halten kann verwendet ...

wird jede Hilfe wirklich respektiert werden ....

Answer 1

wie Ihre variable Sounds services ist undefined beim Start? Vielleicht auf ein leeres Array setzen [] auf Anwendung starten ..

Allerdings ändern Sie Ihre Pipe so, um es robuster gegen Ausfälle zu machen!

@Pipe({ 
    name: 'search' 
}) 
export class SearchPipe implements PipeTransform { 

    transform(services: any[], term: any): any { 
    if (!services || !services.length) return []; // check inputs first! 
    if (term === undefined) term = "rustic".toLowerCase(); 

    return service.filter(srvc => srvc.product_name.toLowerCase().includes(term.toLowerCase())) 
    } 
}