如何以角度过滤垫卡

Question

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

这是我的 Explore TS 文件（我从不同的文件中导入了 matcards 和 routers 组件）

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]

注意：我没有在我的 Stackblitz 文件中包含上面的代码，因为涉及到很多组件，我想知道是否有人可以帮助我或通过查看上面的代码给我有关如何为卡片实现此过滤器功能的提示和stackblitz 文件。

Answer 1

柑橘朋克的答案有效，但这里有一些解释

HTML：

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

:

在 ngOnInit 这个 forEach 之后，将 pubWorkspaces 复制到单独的数组中

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

当搜索发生变化并且我假设您在 pubws 对象中有 name 属性时，将调用下面的函数。

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>`

Answer 2

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

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));
}