Angular 角度：异步管道和图形svg

考虑以下组件

export class SvgGraphComponent {
    public svgData$: Observable<ISomeType>

    constructor(private svgGraphService: SvgGraphService) {
        this.svgData$ = this.svgGraphService.getData();

        this.svgData$.pipe(
            // adding takeUntil here
            // delay(0)
        ).subscribe((svgData: ISomeType) => this.drawSvg(svgData))
    }

    private drawSvg(svgData: ISomeType) {
        const element: HTMLElement = (d3.select('#svgChart').node() as HTMLElement);
        if (!element) {
            return;
        }

        // drawing here
    }
}

导出类SvgGraphComponent{
公共svgData$：可观察
构造函数（专用svgGraphService:svgGraphService）{
this.svgData$=this.svgGraphService.getData（）；
此.svgData$.pipe(
//直到这里
//延迟（0）
).subscribe（（svgData:ISomeType）=>this.drawSvg（svgData））
}
私有drawSvg（svgData:ISomeType）{
常量元素：HTMLElement=（d3.select（'#svgChart'）.node（）作为HTMLElement）；
if（！元素）{
返回；
}
//在这里画画
}
}

模板如下所示

<div id="svgChart" *ngIf="(svgData$ | async) as svgData"></div>

之所以这样做，是因为我想在上传数据时显示微调器。仍然

drawSvg

似乎在异步管道之前获取值，因此

元素

为

null

。如果我取消注释

delay（0）

这里一切似乎都正常。我还是不喜欢耽搁。是否有方法确保构造函数中的订阅将在异步管道之后处理（尝试将订阅放入

ngAfterViewInit

并得到相同的结果）。也许有完全不同的方式来组织这些东西

---

PS.Angular版本是11.2，是的，我使用d3绘制图形，你不应该同时使用异步和订阅，因为它们做的是相同的事情。我建议简单地更改您的可观察代码，如下所示：

构造函数（私有svgGraphService:svgGraphService）{}
ngAfterViewInit（）{
this.loader=true
this.svgGraphService.getData（）.subscribe（（svgData:ISomeType）=>{
this.loader=false；
this.drawSvg（svgData）
})
}
私有drawSvg（svgData:ISomeType）{
常量元素：HTMLElement=（d3.select（'#svgChart'）.node（）作为HTMLElement）；
if（！元素）{
返回；
}
//在这里画画
}

您在哪里使用

drawSvg

方法？谢谢！我忘了在这个简化的代码段中添加

subscribe

，我在不同的观察对象上使用

async

和

subscribe

。使用

map

意味着在异步管道发射上添加

div

之前将调用

drawSvg

，这不是一个选项“我正在使用异步并订阅不同的观测值”不，根据您的问题，您不需要。同一字段：

svgData$

。而

map

只会在使用

async

管道成功解析订阅时得到“处理”。不幸的是，

map

无论如何都不是一个解决方案，因为如果我使用map

drawSvg

将在

之前调用#svgChart

div将被添加好的。那么在这种情况下，实际上使用subscribe比使用

async

更好。我已经更新了我的答案，告诉我它是否有效