Как отфильтровать матовую карту в angular - PullRequest
Новая
       23

Как отфильтровать матовую карту в angular

2 голосов
/ 29 марта 2020

Мне интересно, как я могу использовать панель поиска (https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump) и приведенный ниже код, чтобы можно было фильтровать карточки по названию.

Это мой Explore Файл TS (я импортировал компоненты карт и маршрутизаторов из разных файлов) 

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.

Ответы [ 2 ]

3 голосов
/ 29 марта 2020

Ответ 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;

Функция ниже вызывается при изменении поиска и при условии, что у вас есть свойство name в объекте 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>`
1 голос
/ 29 марта 2020

Вы можете сделать дополнительный список, который показывает результаты. Просто скопируйте полный список при инициализации компонента. В событии изменения панели поиска вы можете вызвать функцию, которая фильтрует исходный список с помощью searchterm и сохранить его в дополнительной переменной: 

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