Angular使用Intersection Observer报错：Cannot read properties of undefined (reading 'classList')

核心问题1：Getter返回DOM元素而非ElementRef，多余调用.nativeElement #

你的work、jerry等getter直接返回的是通过querySelector获取的DOM元素（HTMLElement类型），不是Angular的ElementRef对象，所以不需要再调用.nativeElement，否则会因为undefined.nativeElement抛出错误。

核心问题2：*ngFor生成的元素类名错误，导致querySelector无法找到目标 #

HTML中*ngFor的元素类名绑定的是{{ info.chi }}，但你的list数组里的对象只有name属性，没有chi，所以实际渲染的元素没有.jerry、.matt、.bob这些类名，自然通过querySelector('.jerry')找不到元素，返回undefined，调用classList就会报错。

修复步骤 #

1. 修正Getter的调用方式 #

将触发时的代码修改为：

entry.target.classList.add('activate');
this.work?.classList.add('activate'); // 去掉.nativeElement，加可选链避免找不到元素报错
this.jerry?.classList.add('activate');
this.matt?.classList.add('activate');
this.bob?.classList.add('activate');

2. 修正*ngFor的类名绑定 #

把HTML中*ngFor的元素类名改为绑定name属性，生成对应类名：

<div class="b-game-card {{ info.name }}" *ngFor="let info of list">

或者用Angular规范的属性绑定语法：

<div class="b-game-card" [class]="info.name" *ngFor="let info of list">

3. 可选：用ViewChildren替代querySelector（更符合Angular范式） #

如果不想用querySelector，可通过@ViewChildren获取*ngFor生成的元素：

@ViewChildren('personCard') personCards!: QueryList<ElementRef>;

// 在Intersection Observer回调中：
this.personCards.forEach(card => {
  card.nativeElement.classList.add('activate');
});

对应的HTML需添加模板引用：

<div class="b-game-card {{ info.name }}" #personCard *ngFor="let info of list">

完整修正后的关键代码片段 #

TS部分 #

ngAfterViewInit() {
  const threshold = 0.7;
  const observer6 = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('activate');
          this.work?.classList.add('activate');
          this.jerry?.classList.add('activate');
          this.matt?.classList.add('activate');
          this.bob?.classList.add('activate');
        }
      });
    },
    { threshold }
  );

  observer6.observe(this.text.nativeElement);
}

get jerry() {
  return this.el.nativeElement.querySelector('.jerry');
}

get matt() {
  return this.el.nativeElement.querySelector('.matt');
}

get bob() {
  return this.el.nativeElement.querySelector('.bob');
}
get work() {
  return this.el.nativeElement.querySelector('.work');
}

HTML部分 #

<div class="l-container" #choosePersonFade>
  <div class="b-game-card {{ info.name }}" *ngFor="let info of list">
    <div class="name">
      {{ info.name }}
    </div>
  </div>
</div>

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