Angular：在运行打印之前获取数据，我缺少什么？

Question

我正在研究一个Angular网页，该网页对API运行了多个提取请求。 某些结果显示在子组件中，这些结果是用户可能打开的封闭面板。

当前，当页面本身加载时，所有获取请求都会运行，但是我将它们更改为仅在必要时运行。当用户打开给定面板时，只有这样获取相应的数据。

对于这些面板，打开时触发提取请求是简单的部分。 当我想打印页面时，困难的部分是。

打印视图包括所有数据，包括面板中的数据（使用CSS @Media Print隐藏面板标头和边框）。

为了获取所有相关的数据，必须在打印之前执行所有获取请求。

ergo，我们有两种情况：

• 在打开关联的面板
• 获取所有 data 打印之前，

我正在努力打印案例。

我正在尝试将hostlistener和window.beforeprint事件使用。 获取数据是类似的：

//Ideal place for @HostListener('window:beforeprint', [])
fetchDataIfNotYetExecuted() {  // Executed when opening panel
    if (!this.dataHasBeenLoaded) {
        console.log('Loading data');
        this.fetchData();
    }
}

fetchData() {
    this.myApi.fetchData().subscribe({
        next: response => {
            this.data = response.data;
            this.dataHasBeenLoaded = true;
            console.log('Data load complete');
        },
        error => {
            console.log(error);
        }
    })
}

myapi是运行httpclient的服务。

当前， 强>打印预览打开，但是，我在这里拥有的是异步代码。

我尝试使用异步/等待：

@HostListener('window:beforeprint', [])
async fetchDataIfNotYetExecuted() {  
    if (!this.dataHasBeenLoaded) {
        console.log('Loading data');
        await this.fetchData();
    }
}

async fetchData() {
    try {
        const response = await firstValueFrom(this.myApi.fetchData());
        this.data = response.data;
        this.dataHasBeenLoaded = true;
        console.log('Data load complete');
    } catch(error) {
        console.log(error);
    }
}

因为异步/等待承诺，而不是可观察的，我必须使用rxjs.s.firstvaluefrom将可观察到的诺言转换为诺言。

不幸的是，我无法使其正常工作。

每当我点击网页的打印按钮或运行Ctrl + P时，我都会获得一个Print Preview 没有数据，而我在控制台窗口中同时看到Fetch方法正在运行（因此，如果我再次点击“打印”，而无需重新加载页面，数据就在那里）。

我需要在进行打印预览之前进行。

我想念什么？