如何在 angular 中过滤垫卡

Question

我想知道如何使用搜索栏 (https://stackblitz.com/edit/Whosebugcom-a-60857864-6433166-dpaump ) 和下面的代码来使用它的名称过滤卡片。

这是我的 Explore TS 文件（我从不同的文件导入了 matcards 和路由器组件）

import { Router } from '@angular/router';
import { WorkspaceService } from 'src/app/core/services/workspace.service';
import { Workspace, WorkspaceType } from 'src/app/shared/models/workspace.model';

这是在 HTML 文件中显示卡片

 <mc-workspace-card-list [workspaces] = "pubWorkspaces" [editable] = "false"></mc-workspace-card-list>

这就是现在的样子

[![在此处输入图片描述][1]][1]

Note: I did not included the code above in my Stackblitz file because there are alot of components involved and I'm wondering if someone can help me or give me tips on how to implement this filter function for cards by just looking the code above and stackblitz file.

Answer 1

您可以制作一个显示结果的附加列表。初始化组件时只需复制完整列表即可。在搜索栏更改事件中，您可以调用一个函数，该函数使用搜索词过滤原始列表并将其保存到一个额外的变量中：

export class ExploreComponent implements OnInit, OnDestroy {

private workspaces;
public filteredWorkspaces;
public searchterm;

constructor(private workspaceService: WorkspaceService, private router: Router) { }


ngOnInit(): void {

    this.loading = true;
    this.workspaceService.getUserWorkspaces().subscribe((workspaces) =>{

    workspaces.forEach(workspace => {
      if(workspace.type == WorkspaceType.public){
        this.pubWorkspaces.push(workspace);
      }
    this.filteredWorkspaces = workspaces;
}

onInputChange(){
    this.filteredWorkspaces = this.workspaces.filter(ws => ws.name.includes(this.searchterm));
}

Answer 2

Citrus punk 的答案有效，但这里有一些解释

HTML:

<input type="text"
[(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)" />

TS:

在 ngOnInit 之后，forEach 在单独的数组中存储副本 pubWorkspaces

   workspaces.forEach(workspace => {
        if(workspace.type == WorkspaceType.public){
          this.pubWorkspaces.push(workspace);
        }
      });
   this.filteredPubWorkSpaces= this.pubWorkspaces;

以下函数在搜索发生变化时被调用，我假设您在 pubws 对象中有名称属性。

searchTextChanged(searchText){
 //return array of workspace only having search text in their names
  this.filteredPubWorkSpaces= this.pubWorkspaces.filter(pubws=>pubws.name.includes(searchText));
}

传递给组件

 `<mc-workspace-card-list [workspaces] = "filteredPubWorkSpaces" [editable] = "false"></mc-workspace-card-list>`

如何在 angular 中过滤垫卡

How to filter mat card in angular

html

css

angular

filter

mat-card