Ionic中*ngFor循环下调用divs2applet()函数失效求助

看起来你遇到的是动态DOM元素与外部脚本执行时机不匹配的典型问题，我来帮你拆解下原因和解决方案：

问题根源 #

当你在ngOnInit()里调用divs2applet()时，Angular的*ngFor还没完成动态DOM的渲染——毕竟Firebase数据是异步获取的，而且ngOnInit是组件初始化早期的钩子，此时循环生成的卡片元素还没出现在DOM树里。而不用*ngFor时，元素是静态写在模板里的，ngOnInit执行时它们已经存在，所以函数能正常找到目标元素并执行。

另外还要确认下你的外部脚本加载时机：如果脚本在head里加载，可能在DOM构建前就执行了，也会导致后续找不到元素。

解决方案 #

方案1：利用Angular生命周期钩子+DOM更新时机 #

在组件中改用ngAfterViewChecked()钩子，或者在Firebase数据获取完成后，等待Angular完成DOM更新再调用函数。这里推荐结合ChangeDetectorRef和setTimeout（或NgZone.run）来确保DOM已就绪：

import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
import { FirebaseService } from './your-firebase-service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  items: any[] = [];

  constructor(
    private firebaseService: FirebaseService,
    private cdr: ChangeDetectorRef,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
    this.firebaseService.getItems().subscribe((data) => {
      this.items = data;
      // 先让Angular检测变化并更新DOM
      this.cdr.detectChanges();
      // 再在Angular zone外执行外部函数，确保DOM已就绪
      this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
          divs2applet(); // 调用外部函数
        }, 0);
      });
    });
  }
}

方案2：封装成Angular指令（更优雅的方式） #

把divs2applet()封装成自定义指令，这样每个需要渲染跳棋的卡片元素在初始化后会自动调用函数，完美适配*ngFor的动态渲染：

1. 创建指令：

import { Directive, OnInit, ElementRef } from '@angular/core';

declare var divs2applet: Function; // 声明外部函数类型

@Directive({
  selector: '[appChessboard]'
})
export class ChessboardDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    // 确保元素已存在，调用外部函数
    if (typeof divs2applet === 'function') {
      // 如果函数需要传入元素，这里可以传this.el.nativeElement
      divs2applet();
    }
  }
}

2. 在模块中声明指令：

import { NgModule } from '@angular/core';
import { ChessboardDirective } from './chessboard.directive';

@NgModule({
  declarations: [ChessboardDirective],
  exports: [ChessboardDirective]
})
export class ChessboardModule {}

3. 在模板中使用：

<ion-card *ngFor="let item of items">
  <!-- 其他卡片内容 -->
  <div *ngIf="item.isChessboard" appChessboard></div>
</ion-card>

额外检查：外部脚本加载位置 #

确保你的外部脚本放在index.html的</body>标签之前，这样能保证DOM构建完成后脚本才加载：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <!-- 头部内容 -->
</head>
<body>
  <app-root></app-root>
  <!-- 外部脚本放在这里 -->
  <script src="path/to/your/external-script.js"></script>
</body>
</html>

这样处理后，不管是静态还是动态生成的元素，都能正确触发divs2applet()函数啦！

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