Angular фильтр не возвращает полный список после поиска - PullRequest
Новая
       17

Angular фильтр не возвращает полный список после поиска

0 голосов
/ 15 апреля 2020

У меня есть окно поиска, которое фильтрует карты матов, но когда пользователь выполняет поиск, все карты матов больше не отображаются.

Например, у меня есть набор карт и поиск пользователя "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>

Любое предложение.

1 Ответ

1 голос
/ 15 апреля 2020

потому что вы переопределяете вашу модель здесь 

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="";

create еще один элемент 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()));
   }
...