哈喽，我看了你的问题和代码，这个错误本质上是异步数据加载和模板渲染的时序不匹配导致的，咱们一步步来把它解决掉：

问题根源 #

你在模板里直接写了 [wishes]="items.filter(filter)"，但这两个变量都存在初始化的漏洞：

1. items 用了非空断言 ! 声明，但页面刷新后，ngOnInit 里的 getWishes() 是异步请求，在请求返回前 items 实际是 undefined，模板渲染时尝试调用 undefined.filter() 直接触发报错。
2. filter 变量只做了声明没给初始值，就算 items 有数据，初始时 filter 是 undefined，调用 items.filter(undefined) 也会出问题。

具体修复步骤 #

1. 给 items 设置初始空数组 #

修改 app.ts 里的 items 声明，把非空断言换成初始空数组：

// 替换原来的 items! : WishItem[];
items: WishItem[] = [];

这样就算异步请求还没返回，items 也是个合法的空数组，调用 filter 方法不会报错。

2. 给 filter 设置初始默认过滤函数 #

在 app.ts 里给 filter 一个初始值，和 wish-filter 组件默认选中的「显示全部」对应：

// 替换原来的 filter: any;
filter: (item: WishItem) => boolean = (item) => item;

这样初始时 filter 就是合法的过滤函数，不会出现 undefined 的情况。

3. （可选）模板里加可选链做双重保险 #

如果担心以后还有类似的异步时序问题，可以在模板里给 items 加可选链，进一步兜底：
修改 app.html 里的 wish-list 标签：

<wish-list [wishes]="items?.filter(filter) || []" ></wish-list>

items?.filter() 表示只有当 items 不是 null/undefined 时才调用 filter，后面的 || [] 保证就算返回 undefined，也会传给子组件一个空数组，避免子组件出问题。

额外小优化 #

你在 wish-filter 组件的 ngOnInit 里调用了 updateFilter('0')，可以把 wishFilter 直接初始化为 "0"，逻辑会更清晰：

// wish-filter.ts 里修改
wishFilter: string = "0";

ngOnInit(): void {
  this.updateFilter(this.wishFilter);
}

这样改完之后，页面刷新时就不会再出现那个 TypeError 了，所有变量都有合法的初始值，异步请求返回后也会自动更新数据~

内容来源于stack exchange