如何以角度过滤垫卡

Question

我想知道如何使用搜索栏（https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump）和下面的代码能够使用其名称过滤卡片。这是我的 Explore TS 文件（我从不同的文件导入了 matcard 和路由器组件）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 文件中，因为涉及到很多组件，我想知道是否有人可以帮助我或给我一些关于如何通过查看上面的代码来实现卡片过滤功能的提示堆栈闪电战文件。

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

}