Angular NgFor生成的动态DOM ID无法被JS查找的问题求助

问题根源在于：当你从API获取数据后立刻调用Plotly绘图方法时，Angular还未完成*ngFor对应的DOM渲染——Angular的变更检测会在当前代码执行完成后才更新视图，此时带plot0、plot1的DIV还未被创建，所以Plotly找不到对应元素。

解决方法一：延迟执行绘图逻辑（最简单） #

利用setTimeout将绘图代码放到下一个宏任务执行，此时Angular已经完成DOM更新：

修改component.ts中的get_test_traces方法：

get_test_traces() {
    this.http.get<APIResponse>(`${this.apiUrl}/test`).subscribe(
        (response) => {
            console.log('response:', response)
    
            if (response['status']) {
                this.traces = response['data']['traces']
        
                // 延迟执行，等待DOM渲染完成
                setTimeout(() => {
                    this.traces.forEach((item, i) => {
                        let x: number[] = item.x;
                        let y: number[] = item.y;
                        console.log('x: ', x)
                        console.log('y: ', y)
        
                        this.plot.plotLine("Line Plot", `plot${i}`, x, y);
                    });
                }, 0);
            }
        }
    )
}

解决方法二：手动触发变更检测 #

通过ChangeDetectorRef手动触发变更检测，强制Angular先更新DOM，再执行绘图：

1. 导入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

2. 构造函数注入：

constructor(
    private http: HttpClient, 
    private _Activatedroute: ActivatedRoute, 
    private router: Router, 
    private plot: PlotlyService,
    private cdr: ChangeDetectorRef // 新增
) {
    this.apiUrl = environment.apiUrl
}

3. 修改get_test_traces方法：

get_test_traces() {
    this.http.get<APIResponse>(`${this.apiUrl}/test`).subscribe(
        (response) => {
            console.log('response:', response)
    
            if (response['status']) {
                this.traces = response['data']['traces']
                // 手动触发变更检测，更新DOM
                this.cdr.detectChanges();
        
                this.traces.forEach((item, i) => {
                    let x: number[] = item.x;
                    let y: number[] = item.y;
                    console.log('x: ', x)
                    console.log('y: ', y)
        
                    this.plot.plotLine("Line Plot", `plot${i}`, x, y);
                });
            }
        }
    )
}

优化模板中的ID绑定 #

将模板中的attr.id="plot{{i}}"改为Angular推荐的属性绑定语法，可读性更强：

<div [id]="'plot' + i"></div>

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