Question

我正在尝试添加一个搜索过滤器管道来过滤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

如何创建过滤管以过滤垫板卡？

0 个答案: