如何使用卡片而不是角度 8 中的数据表过滤数据？

Posted 2023-03-06

【中文标题】如何使用卡片而不是角度 8 中的数据表过滤数据？

【英文标题】：How can I filter data using cards and not data tables in angular 8?

【发布时间】：2020-02-26 15:29:48

【问题描述】：

我正在尝试使用卡片过滤数据，但我没有设法使用卡片而不是数据表过滤它

示例：

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 烧录了数据，但这对我没有帮助，因为我想根据名称或标签进行过滤

知道如何进行这种过滤或如何进行吗？对大学项目来说真的非常有用

【问题讨论】：

你能为此创建一个堆栈闪电战吗？

你需要一个 SearchPipe，我为一个项目创建了一个，我会立即添加它供您参考。

【参考方案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>

【讨论】：

你认为我们在使用烟斗时有相同的表现吗？

是的，我想是这样，但是当有很多数据要过滤时，我不确定性能。如果你想要一个准确的答案，你必须自己测试。

【参考方案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>

编辑：

将 Pipe 添加到 AppModule.ts 中也可以正常工作，

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

这将相应地过滤；）

【讨论】：

对不起，我怎么能在我已经做过的事情中实现你的管道？并尝试过，但我仍然无法实现它@AlokeT

告诉我你做了什么，我会帮你的。