如何修复Angular中取消收藏卡片后全部卡片从UI消失的问题

你的代码存在3个核心问题导致取消收藏后列表消失：

1. 接口请求回调里的赋值顺序错误，且调用filterChanged时未传入当前输入框的值，导致过滤逻辑不符合预期
2. HTML模板里的列表判断条件未添加可选链，当favorites为undefined/null时访问length属性会报错，Angular会直接隐藏整个列表节点
3. 未对接口返回的收藏列表做兜底处理，若后端返回null/undefined会直接导致后续逻辑异常

1. 调整TS代码逻辑 #

修改ngOnInit里的subscribe回调，调整执行顺序、添加请求异常处理、给收藏列表加兜底：

ngOnInit(): void {
  this.loading = true;
  // 给favorites设置初始空数组，避免初始状态报错
  this.favorites = [];
  this.getUserFavs$.pipe(switchMap(() => {
        return this.userService.getUser();
      }),
    )
    .subscribe({
      next: (user: User) => {
        // 优先给user赋值，再处理收藏列表
        this.user = JSON.parse(JSON.stringify(user));
        // 给收藏列表加兜底，确保一定是数组
        this.user.userFavorites = this.user.userFavorites || [];
        // 调用filterChanged时传入当前输入框的值，保证刷新后匹配当前搜索条件
        this.filterChanged(this.inputCtrl.value);
        this.loading = false;
      },
      error: (err) => {
        // 处理请求异常，避免loading一直处于加载状态
        console.error('获取收藏列表失败', err);
        this.loading = false;
      }
    });
  this.getUserFavs$.next();

  // 若之前没有添加输入框值变化监听的话需要补充，保证输入时触发过滤
  this.inputCtrl.valueChanges.subscribe(val => {
    this.filterChanged(val);
  });
}

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

2. 修改HTML模板的判断条件 #

给favorites添加可选链，避免访问length属性时报错：

<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()"></app-card-list>
</div>

内容的提问来源于stack exchange，提问作者user9436741