Как я могу фильтровать данные, используя карты, а не таблицы данных в angular 8?

Question

Я пытаюсь отфильтровать данные с помощью карточек, но мне не удалось отфильтровать их с помощью карточек, а не таблицы данных

пример:

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-publicaciones',
  templateUrl: './publicaciones.component.html',
  styleUrls: ['./publicaciones.component.css']
})
export class PublicacionesComponent implements OnInit {
  private users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
  
  dataSource = new MatTableDataSource(this.users);
  constructor() { }

  ngOnInit() {
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

.container {
    max-width: 900px;
    justify-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 80%;
    padding-left: 80px;
    padding-top: 8%;
}

.example-card {
    padding-left: 105px;
}

.example-full-width {
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    padding-left: 100px;
    align-items: stretch;
}

.example-card-two {
    max-width: 400px;
}

.example-header-image {
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-size: cover;
}

<div class="container">
    <mat-card class="example-card">
        <mat-card-header>
            <mat-form-field class="example-full-width">
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>
        </mat-card-header>

        <mat-card-content class="grid">


            <mat-card class="example-card-two" *ngFor="let user of users">
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>Shiba Inu</mat-card-title>
                    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <p>
                        {{user}}
                    </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button>LIKE</button>
                    <button mat-button>SHARE</button>
                </mat-card-actions>
            </mat-card>
        </mat-card-content>

    </mat-card>

</div>

Практически до сих пор я записываю данные, используя ngfor, но это не помогает мне, так как я хотел бы фильтровать по имени или тегам

Любая идея, как я мог бы сделать такую ​​фильтрацию или как я мог бы это сделать? Серьезно, было бы очень хорошо для университетского проекта

Answer 1

Вы можете получить доступ к отфильтрованным данным источника данных с помощью this.dataSource.filteredData.

<mat-card class="example-card-two" *ngFor="let user of this.dataSource.filteredData">
    <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
         {{user}}
      </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

Answer 2

По-другому вы можете добиться этого, создав Angular Pipe.

search.pipe.ts

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

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

  public transform(value: any, keys: string, term: string) {
    if (!term) {
      return value;
    }
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
  }

}

и в своем html вы можете использоватьэто как:

<mat-card-content class="grid">


            <mat-card class="example-card-two" *ngFor="let user of users | search:'firstName,lastName,emailId,phoneNo,tags,etc':searchTerm">
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>Shiba Inu</mat-card-title>
                    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <p>
                        {{user}}
                    </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button>LIKE</button>
                    <button mat-button>SHARE</button>
                </mat-card-actions>
            </mat-card>
        </mat-card-content>

РЕДАКТИРОВАТЬ:

Добавить трубу в AppModule.ts , а также работать,

@NgModule({
  declarations: [
    SearchPipe,
   /** other Imports **/
  ],

И это будет соответственно фильтровать;)