Angular2中使用ngFor展示嵌套列表遇函数调用问题

先看你提供的分类与文章数据（顺便修正了Article6重复的ID问题）：

Articles: Article[] = [
  {id:1,name:'Article1',categoryId:1,publichedOn:new Date,description:'Article1 '},
  {id:2,name:'Article2',categoryId:1,publichedOn:new Date,description:'Article2 '},
  {id:3,name:'Article3',categoryId:2,publichedOn:new Date,description:'Article3 '},
  {id:4,name:'Article4',categoryId:2,publichedOn:new Date,description:'Article4 '},
  {id:5,name:'Article5',categoryId:3,publichedOn:new Date,description:'Article5 '},
  {id:6,name:'Article6',categoryId:3,publichedOn:new Date,description:'Article6 '}
];
Categories: Category[] = [
  {id:1,name:'Category1'},
  {id:2,name:'Category2'},
  {id:3,name:'Category3'},
];

还有你的模板代码：

<ul>
  <li *ngFor="let category of categories">
    {{category.name}}
    <ul>
      <li *ngFor="let article of getArticlesForCategory(category.id)">
        {{article.name }}
      </li>
    </ul>
  </li>
</ul>

为什么会遇到问题？ #

其实不是完全“无法调用”，而是这种写法存在性能隐患，甚至会导致意外渲染：Angular的变更检测机制会在每次触发检测时（比如用户输入、定时器触发、数据更新等）反复调用getArticlesForCategory函数。如果你的函数每次都返回新数组（比如直接用filter返回），Angular会认为数组是全新的，从而频繁更新DOM，造成不必要的性能损耗。另外如果函数逻辑有误（比如返回undefined），也会导致文章无法渲染。

两种解决方案 #

方案1：优化函数调用（临时解决，不推荐长期使用）

如果一定要保留函数调用的方式，需要给函数加缓存，避免重复计算：

// 组件内定义缓存容器
private articleCache = new Map<number, Article[]>();

getArticlesForCategory(categoryId: number): Article[] {
  // 缓存中没有对应数据时，再过滤并缓存
  if (!this.articleCache.has(categoryId)) {
    const matchedArticles = this.Articles.filter(article => article.categoryId === categoryId);
    this.articleCache.set(categoryId, matchedArticles);
  }
  // 返回缓存的结果
  return this.articleCache.get(categoryId)!;
}

// 注意：当文章或分类数据更新时，需要清空缓存
updateArticles(newArticles: Article[]) {
  this.Articles = newArticles;
  this.articleCache.clear();
}

这种方式能减少重复计算，但还是不如预处理数据高效。

方案2：提前预处理数据（推荐，性能最优）

在组件初始化时，把分类和对应的文章整合到一个新数组里，模板直接遍历这个预处理后的结构即可：

// 组件内定义整合后的数据结构
categoryWithArticles: { category: Category; articles: Article[] }[] = [];

ngOnInit(): void {
  // 初始化时整合分类与文章
  this.buildCategoryArticles();
}

// 单独封装处理逻辑，方便后续数据更新时复用
buildCategoryArticles() {
  this.categoryWithArticles = this.Categories.map(category => ({
    category,
    articles: this.Articles.filter(article => article.categoryId === category.id)
  }));
}

// 如果数据是异步获取的，在订阅回调中调用处理方法
loadData() {
  this.apiService.getArticles().subscribe(articles => {
    this.Articles = articles;
    this.buildCategoryArticles();
  });
}

然后模板修改为：

<ul>
  <li *ngFor="let item of categoryWithArticles">
    {{item.category.name}}
    <ul>
      <li *ngFor="let article of item.articles">
        {{article.name}}
      </li>
    </ul>
  </li>
</ul>

这种方式的优势是数据只需要处理一次（或在数据更新时重新处理），避免了变更检测时频繁调用函数的问题，模板逻辑也更清晰，性能表现更好。

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