搜索后角度过滤器不返回完整列表

Question

我有一个过滤垫卡的搜索框，但是当用户完成搜索时，所有垫卡都不再显示。

例如，我有一堆卡片，用户搜索“John Card”，它会过滤 John Card，但是当用户删除他的输入时，只有 John Card 卡在那里，并且不再显示完整的垫子卡片。

TS 文件

  searchText:string;
  workspaces: Workspace[] = [];

    this.loading = true;
    this.workspaceService.getPublicWorkspaces().pipe(takeUntil(this.death$)).subscribe((workspaces) =>{

    this.workspaces = workspaces;

    this.showColumn = false;
    this.loading = false;
    }, ()=>this.loading = false)
}
  searchTextChanged(searchText){
    //return array of workspace only having search text in their names
     this.workspaces = this.workspaces.filter(pubws=>pubws.name.toLowerCase().includes(searchText.toLowerCase().trim()));
   }

HTML

<input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)" placeholder="Search" class="input">

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

任何建议。

Answer 1

因为你在这里覆盖了你的模型

this.workspaces = this.workspaces.filter(pubws=>pubws.name.toLowerCase().includes(searchText.toLowerCase().trim()));

在 html 中将您的输入更改为

<input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" (ngModelChange)="searchTextChanged()" placeholder="Search" class="input">

在声明后初始化你的字符串

searchText:string="";

再创建一个 temp_element

workspacesTemp: Workspace[] = [];

两个都填

 this.workspaces = workspaces;
 this.workspacesTemp = workspaces;

用这个温度过滤它

searchTextChanged(){
    var search=this.searchText;
    if(search==""){this.workspaces=this.workspacesTemp;}
     this.workspaces = this.workspacesTemp.filter(pubws=>pubws.name.toLowerCase().includes(search.toLowerCase().trim()));
   }