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

Question

我有一个过滤框，可以过滤席卡，但是当用户完成搜索后，所有席卡都不再显示。

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

TS文件

import { Component, OnInit, OnDestroy } from "@angular/core";
import { tags } from "./tags.data";
import { FormControl } from "@angular/forms";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { Router } from '@angular/router';
import { WorkspaceService } from 'src/app/core/services/workspace.service';
import { Workspace, WorkspaceType } from 'src/app/shared/models/workspace.model';

@Component({
  selector: 'mc-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss']
})
export class ExploreComponent implements OnInit, OnDestroy {

  icon="../../assets/images/icons/search-magnifying-glass-icon.svg";
  //Tags
  query: string;
  tags = tags;
  _filteredTags = [];


  //cards
  workspacesTemp: Workspace[] = [];
  searchText:string;

  inputCtrl: FormControl = new FormControl();
  death$: Subject<void> = new Subject();

  showColumn = false;

  workspaces: Workspace[] = [];
  loading: boolean = false;

  constructor(private workspaceService: WorkspaceService, private router: Router) { }

  ngOnInit(): void {
    this._filterTags();

    this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this._filterTags(value);
        this.updateQuery(value);
        if(value == ''){
          this.showColumn = false;
          this.icon="../../assets/images/icons/search-magnifying-glass-icon.svg"

        }else{
          this.showColumn = true;
          this.icon="../../assets/images/icons/search-magnifying-glass-teal-icon.svg"
        }
      });

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

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

    this.showColumn = false;
    this.loading = false;
    }, ()=>this.loading = false)

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

  ngOnDestroy(): void {
      this.death$.next();
      this.death$.complete();
  }

  updateQuery(query: string) {
    this.query = query;
  }

  _filterTags(filterValue?: string) {
    console.log({ filterValue });
    if (!filterValue) {
      this._filteredTags = [...tags];
      return;
    }

    this._filteredTags = this.tags.filter((v) =>
    v["name"].toLowerCase().includes(filterValue.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>
任何建议。

我有一个过滤框，可以过滤席卡，但是当用户完成搜索后，所有席卡都不再显示。例如，我有一堆卡片，用户搜索“ John Card”，它是...

Answer 1

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