Suche in DataGrid

Question

Ich verwende die Klarheit Datagrid und ich möchte in der Lage sein, basierend auf einem Suchfilter den gesamten Inhalt des Rasters zu filtern.

Ich habe versucht, eine Pipe zu erstellen. Das Rohr ist im AppModul enthalten. Die Pipe wird das erste Mal aufgerufen, wenn die Komponente geladen wird (und nichts soll passieren), aber aus irgendeinem Grund passiert nichts, wenn ich etwas in meine einfüge. Kein Aufruf der 'userFilter'-Pipe.

user.component.html

<input type="text" id="search" placeholder="Search..." ([ngModel])="searchTerm"> 
... 
<clr-dg-row *clrDgItems="let user of users | userFilter: searchTerm" [clrDgItem]="user" (click)="backupSelectedUser(user)"> 
    <clr-dg-cell>{{ user.username }}</clr-dg-cell> 
    <clr-dg-cell>{{ user.name }}</clr-dg-cell> 
    <clr-dg-cell>{{ user.firstName }}</clr-dg-cell> 
</clr-dg-row> 
... 

search.pipe.ts

transform(items: any, term: any): any { 
    if (term === undefined) { 
    return items; 
    } 

    return items.filter(function (item) { 
    for (const property in item) { 
     if (item[property] === null) { 
     continue; 
     } 
     if (item[property].toString().toLowerCase().includes(term.toLowerCase())) { 
     return true; 
     } 
    } 
    return false; 
    }); 
} 

UPDATE: Ich habe ein wenig Tippfehler für die ngModel tat. Es sollte stattdessen [(ngModel)] sein!

Answer 1

Ich erinnere mich an einen Plunker Schreiben genau diese ein paar Monate zurück darstellt: https://plnkr.co/edit/59FZKya2Soa7Ofnlge3B?p=preview

Basierend auf, was Sie beschrieben, das ist genau das, was Sie wollen. Sie sollten keine Pipes verwenden, wie Sie es jetzt in Iteratoren tun, da Angular gezwungen ist, sie für jede Änderungserkennung neu zu berechnen, was viel zu schwer ist. Die empfohlene Lösung besteht also darin, bei *clrDgItems="let user of users" zu bleiben und die Eigenschaft users selbst auf das gefilterte Array zu setzen, sodass Sie das Filterergebnis nur dann neu berechnen, wenn der Benutzer etwas eingibt.