html - 如何修复角度的 UI 变化

Question

在我的主页中，我有一个搜索栏和导入的 favoritedList 组件，它显示了所有用户收藏的卡片。

我遇到的问题是，当我取消收藏某张卡片时，由于某种原因，所有卡片都从 UI 中消失了，即使它没有删除后端卡片的其余部分。

然后当我刷新浏览器时，其余的卡片会重新显示。我不确定我的逻辑到底哪里出了问题，所以如果我能得到任何帮助或建议，我将不胜感激。

  ngOnInit(): void {
    this.loading = true;
    this.getUserFavs$.pipe(switchMap(() => {
          return this.userService.getUser();
        }),
      )
      .subscribe((user: User) => {
        this.favorites = user.userFavorites;
        this.user = JSON.parse(JSON.stringify(user));
        this.filterChanged();
        this.loading = false;
      });
    this.getUserFavs$.next();
  }

  refresh(): void {
    this.getUserFavs$.next();
  }

  filterChanged(searchText?: string) {
    if (!searchText) {
      return (this.favorites = this.user.userFavorites);
    }
    searchText = searchText?.toLowerCase();
    this.favorites = this.user.userFavorites.filter((item) => {
      return item.name.toLowerCase().includes(searchText);
    });
  }

HTML

  <form class="search-form">
    <input #searchValue id="input-field" autocomplete="off"
      name="insightSearchFilter"[formControl]="inputCtrl" />


    <p class="hint" *ngIf="inputCtrl.value">
      <strong> {{ favorites?.length }} Search Result for </strong>
      <em>"{{ inputCtrl?.value }}".</em>
      <strong> The Results listed below are exact matches for your query.</strong>
    </p>
  </form>

  <div *ngIf="favorites.length > 0">
    <app-card-list [cards]="favorites" (refreshCardList)="refresh($event)"></app-card-list>
  </div>

标签： htmlangulartypescriptuser-interfacefilter