Как создать трубу фильтра для фильтрации мат-карт? - PullRequest
Новая
       25

Как создать трубу фильтра для фильтрации мат-карт?

0 голосов
/ 02 апреля 2020

Я пытаюсь добавить канал фильтра поиска для фильтрации карточек в html, но я не могу понять, как это сделать, какие-либо идеи?

Код ниже чтобы дать представление о результате, которого я пытаюсь достичь, если вам нужна какая-либо другая информация, просто спросите :) спасибо

list.component. html

<mat-card id="search">
  <mat-form-field class="recipe-form">
    <input type="text" matInput placeholder="search by restaurant" value="restaurant">

   </mat-form-field>
 </mat-card>

 <mat-card id="details" *ngFor="let recipe of list">
     <mat-card-title>{{ recipe.name }}</mat-card-title>
     <mat-card-subtitle>Place: {{ recipe.place }}</mat-card-subtitle>
     <mat-card-subtitle>Rating: {{recipe.rating}}</mat-card-subtitle>
     <mat-card-subtitle>Notes: {{recipe.notes}}</mat-card-subtitle>
     <mat-card-actions>
       <button (click)="goMap(recipe)" mat-button><mat-icon>map</mat-icon></button>
       <button (click)="share(recipe)" mat-button><mat-icon>share</mat-icon></button>
       <button (click)="goDetails(recipe)" mat-button><mat-icon>list</mat-icon></button>

     </mat-card-actions>
  </mat-card>

  <a id="btnCreate" mat-fab routerLink="/recipe"><mat-icon>create</mat-icon></a>

Труба 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filter',
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], value: string, prop: string): any[] {
        if (!items) return [];
        if (!value) return items;
        return items.filter(singleItem =>
        singleItem[prop].toLowerCase().startsWith(value.toLowerCase())
        );
    }
}

    **HTML**
    https://pastebin.com/W4puyRRZ

    **TS**
    https://pastebin.com/bYvG7iQR

    **Pipe**
    https://pastebin.com/a9sJYt0S
...