Angular 2嵌套数据过滤问题：多对多关系下按类别筛选书籍无效

我帮你梳理下代码里的几个关键问题，这就是为什么过滤功能没生效的原因：

1. 过滤条件的返回值逻辑不严谨 #

你内层用了book.categories.filter(...)，这个方法返回的是匹配的类别数组，而外层的books.filter()需要的是布尔值判断。虽然JS里空数组会被视为false，非空数组视为true，但这种写法不够直观，还容易因为数组的其他特性引发意外问题。正确的做法是用Array.some()，它直接返回布尔值，表示是否存在符合条件的元素。

2. 路由参数监听与过滤逻辑脱节 #

你在getBooks()的订阅里先执行了一次过滤（用的是初始路由快照的参数），之后才监听路由参数变化。但参数变化时，updateList()只是把books赋值为之前的filteredBooks，并没有根据新的categoryId重新过滤书籍列表，自然不会更新结果。

3. 未保存原始全量书籍列表 #

你没有保留完整的原始书籍数据，第一次过滤后filteredBooks就变成了过滤后的子集，后续无法基于全量数据重新执行过滤操作。

修正后的代码 #

allBooks: Book[] = []; // 保存全量书籍数据
filteredBooks: Book[] = [];
categoryId: number = 0;

ngOnInit(): void {
  // 先获取全量书籍并保存
  this.bookService.getBooks().subscribe(books => {
    this.allBooks = books;
    // 初始化时执行第一次过滤
    this.updateList();
  });

  // 单独监听路由参数变化，每次变化都触发重新过滤
  this.route.params.subscribe(params => {
    this.categoryId = +params['categoryId']; // 转成数字类型，避免字符串比较问题
    this.updateList();
  });
}

updateList(): void {
  if (this.categoryId > 0) {
    // 根据当前categoryId从全量书籍中过滤
    this.filteredBooks = this.allBooks.filter(book => 
      book.categories.some(cat => cat.categoryId === this.categoryId)
    );
  } else {
    // 无categoryId时显示所有书籍
    this.filteredBooks = [...this.allBooks];
  }
  // 更新最终展示的书籍列表
  this.books = this.filteredBooks;
}

关键修改点说明 #

• 新增allBooks保存全量书籍数据，确保每次过滤都基于完整数据集
• 用some()替代内层filter()，明确返回布尔值作为过滤条件，逻辑更清晰
• 路由参数监听和书籍获取逻辑解耦，参数变化时直接触发重新过滤
• 给categoryId做了类型转换（+params['categoryId']），避免字符串与数字的比较错误
• 补充了无categoryId时的逻辑，默认显示所有书籍

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