在Angular中，当使用QueryList来获取一组元素时，有时候会遇到“ExpressionChangedAfterItHasBeenCheckedError”错误。这是由于在Angular的变更检测周期中，当一个组件的属性发生变化时，Angular会检查所有子组件的属性是否也发生了变化。如果发现子组件的属性发生了变化，Angular会再次运行变更检测。然而，在变更检测期间，如果我们尝试修改QueryList中的元素，就会触发这个错误。

以下是解决这个问题的一些方法：

1. 使用setTimeout延迟修改QueryList中的元素，以便在下一个变更检测周期中执行修改操作。这样可以避免在变更检测期间修改QueryList而导致的错误。

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    

      {{ item }}
    
    Add Item
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChildren('item') items: QueryList;

  ngAfterViewInit() {
    setTimeout(() => {
      // 在下一个变更检测周期中执行修改操作
      this.items.changes.subscribe(() => {
        console.log('QueryList changed');
      });
    });
  }

  addItem() {
    this.items.toArray().push('New Item');
  }
}

2. 使用ngAfterViewInit钩子函数来执行修改操作。ngAfterViewInit在视图初始化之后调用，可以确保组件的变更检测已经完成。

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    

      {{ item }}
    
    Add Item
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChildren('item') items: QueryList;

  ngAfterViewInit() {
    // 在ngAfterViewInit中执行修改操作
    this.items.changes.subscribe(() => {
      console.log('QueryList changed');
    });
  }

  addItem() {
    this.items.toArray().push('New Item');
  }
}

请注意，以上两种方法都是通过订阅QueryList的changes事件来监听QueryList的变化。这种方式可以确保我们在变更检测期间修改QueryList时不会触发错误。