当DOM尚未准备好时,由blazor代码调用的Javascript会发生吗?

问题描述 投票:-1回答:1

我有一个必须创建图形的javascript函数:

<script>
    window.setGraph = (lab, ser) => {
        console.log(document.getElementById("weather-chart"));
        console.log(lab);
        console.log(ser);
        var chart = new Chartist.Line('#weather-chart', {
            labels: lab,
            series: ser
        });

        console.log("done");
        return true;
    }    
</script>

这个函数由我的一个blazor组件调用:

protected override async Task OnInitAsync()
{
    some-data-a = await RetrieveSomeData();
    some-data-b = await RetrieveSomeOtherData();
    JSRuntime.Current.InvokeAsync<bool>("setGraph", some-data-a, some-data-b);
}

一切都被执行,我的console.log被称为。但似乎在这一刻我的元素#weather-chart无法找到,因为我得到了这个:

chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Object.c.createSvg (chartist.min.js:8)
    at f.d [as createChart] (chartist.min.js:8)
    at f.h (chartist.min.js:8)

和我的console.log(document ....)返回null。

如果我转到此页面,我就会出现错误,如果在收到此错误后我在Chrome开发人员工具中执行类似window.setGraph([1,2,3], [[1,2,3]])的操作,则所有内容都会正确初始化。

那我做错了什么?为什么图表主义者似乎无法找到该元素?

javascript webassembly blazor
1个回答
-1
投票

看来blazor的数据绑定需要一些时间才能显示html。所以基本上在我设置了_items之后,它正在改变模板,但是在此之后线路的速度还不够快(不知道为什么,因为有等待)。

© www.soinside.com 2019 - 2024. All rights reserved.