在 angular 8 中如何使用卡片而不是数据表来过滤数据？

Question

我正在尝试使用卡片过滤数据，但我无法使用卡片而不是数据来过滤数据 table

示例：

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 **/
  ],

这将相应地过滤 ;)

在 angular 8 中如何使用卡片而不是数据表来过滤数据？

How can I filter data using cards and not data tables in angular 8?

css

angular

angular8

angular-material-6