Angular二次加载数据后变更检测失效问题求助

我开发了一个分批加载大量数据的SPA，在列表底部实现了一个无限滚动组件，搭配自定义trackVisibility指令——当组件可见时，向SQL服务器请求下一批数据。首次加载后一切正常，但第二次加载的元素触发视图修改操作时毫无反应，只有手动调用cdr.detectChanges()、切换窗口等外部事件触发变更检测后才会响应，首批加载的元素仍能正常工作，且无明显报错提示。

组件HTML标签 #

<app-infinity-scroll 
  [(pageNumber)]="page" 
  [displayPage]="displayPage" 
  [authd]="authd"
  [done]="done" 
  [numResults]="displayPage == 'tiles-hub' ? hubs.length : wallets.length"
  class="{{scrollVisible ? '' : 'hiddenDisplay'}}"
  trackVisibility
></app-infinity-scroll>

无限滚动组件代码 #

import { outputAst } from '@angular/compiler';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DbSqlService } from 'services/db-sql.service';
import { TokenAuthService } from 'services/token-auth.service';
import { TrackVisibilityDirective } from 'src/app/directives/track-visibility.directive';
import { SortStyle } from 'src/app/interfaces/mvlot';
import { MatProgressBar } from '@angular/material/progress-bar';

@Component({
  selector: 'app-infinity-scroll',
  templateUrl: './infinity-scroll.component.html',
  styleUrls: ['./infinity-scroll.component.scss']
})
export class InfinityScrollComponent implements OnInit {

  @Input() pageNumber: number;
  @Input() displayPage: string;
  @Input() authd: boolean;
  @Input() done: boolean;
  @Input() numResults: number;

  @Output() pageNumberChange = new EventEmitter<number>();

  lastDisplay = '';
  loading: boolean = true;
  
  constructor(
    private visTrack: TrackVisibilityDirective
    , private cdr: ChangeDetectorRef
    , private dbApi: DbSqlService
    , private authService: TokenAuthService
  ) {
  }

  ngOnInit(): void {
    this.authService.UserAuthd.subscribe((res) => {
      // if (res) {
        this.dbApi.initGetWalletsHandler(0, 50, SortStyle.scoreDesc);
        this.pageNumber = 1;
      // }
    })

    this.visTrack.visibile.subscribe((val) => {
      if (!this.done) {
        this.loading = true;
        if (val) {
          if (this.displayPage == 'tiles') {
            this.dbApi.initGetWalletsHandler((this.pageNumber) * 50, 50, SortStyle.default);
            this.pageNumber += 1;
          }
          if (this.displayPage == 'tiles-hub') {
            this.dbApi.initGetHubsHandler((this.pageNumber) * 50, 50);
            this.pageNumber += 1;
          }
        }
      }
    })
  }
}

数据响应监听器代码 #

this.dbApi.resultObs.subscribe(val => {
  if (val.append != true) {
    this.results = [];
  } 

  if (val.reset) {
    this.page = 1;
  }

  val.data.data.forEach((b: any) => {
    var result: Collection;
    var existingResults = this.results.filter(w => w.ownerId == b.ownerId);
    
    if (existingResults.length == 0) {
      result = {
        ownerId: b.ownerId
        , totalScore: b.modifiedLandScore
        , filteredCount: b.filteredCount
        , totalLots: b.totalLots
        , totalPrice: b.totalPrice
        , name: ''
        , lands: []
        , type: CollectionType.b
      }

      result.bs.push(b);
      this.results.push(result);
    } else {
      result = existingResults[0];
      result.bs.push(b);
    }
  });

  this.resultDataSource = new MatTableDataSource(this.results);

  this.collectionType = CollectionType.b;
  this.uiService.loadingBar(false);
  this.done = val.data.data.length == 0;

  this.cdr.detectChanges();
})

视图渲染代码 #

<tr *ngFor="let result of results">
  <td>
    <display-block 
      [collection]="b" 
      [displayVertical]="displayVertical" 
      [displayCaseCount]="displayCaseCount" 
      [gridClassName]="gridClassName" 
      [authd]="authd" 
      [type]="result.type"
      [expanded]="results.length == 1"
      [isPhonePortrait]="isPhonePortrait"
      ></display-block>
  </td>
</tr>

trackVisibility指令代码 #

import {
  Directive,
  ElementRef,
  EventEmitter,
  NgZone,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';

@Directive({
  selector: '[trackVisibility]',
})
export class TrackVisibilityDirective implements OnInit, OnDestroy {
  observer!: IntersectionObserver;

  @Output()
  visibile = new EventEmitter<boolean>();

  constructor(private el: ElementRef<HTMLElement>, private ngZone: NgZone) {}

  ngOnInit(): void {
    this.ngZone.runOutsideAngular(() => {
      this.observer = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
           this.visibile.emit(e.isIntersecting);
        });
      });
      this.observer.observe(this.el.nativeElement);
    });
  }

  ngOnDestroy(): void {
    this.observer.disconnect();
  }
}

排查思路 #

• 修复变更检测上下文：IntersectionObserver在Angular zone外运行，触发的事件未触发变更检测。可在指令的回调中用ngZone.run()包裹emit操作，或在组件的订阅回调中用ngZone.run()包裹数据请求逻辑，确保流程在Angular变更检测范围内执行。
• 调整数组更新方式：Angular依赖数组引用变化触发变更检测，尝试用this.results = [...this.results, result]替换this.results.push(result)，强制更新数组引用。
• 检查子组件绑定：视图渲染代码中*ngFor循环变量是result，但display-block绑定的是[collection]="b"，可能是笔误导致子组件未正确接收数据，需修正为[collection]="result"。
• 排查OnPush策略冲突：如果display-block组件使用了ChangeDetectionStrategy.OnPush，需确保输入属性引用变化，或在子组件内手动触发变更检测。
• 验证事件绑定：检查display-block组件内的事件绑定是否在Angular zone内注册，避免因上下文丢失导致事件不触发视图更新。

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