Question

我有一个必须创建图形的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)

AND 我的console.log（document ....）返回null。

如果我转至此页面，则报错，如果在收到此错误后立即在chrome开发人员工具中执行类似window.setGraph([1,2,3], [[1,2,3]])的操作，则一切均已正确初始化。

那我做错了什么？为什么图表专家似乎找不到该元素？

Answer 1

看来，blazor的数据绑定需要一些时间才能显示html。因此，基本上，在我设置_items之后，它正在更改模板，但是对于此之后的行来说不够快（不确定为什么，因为有一个等待）。

当DOM尚未准备就绪时，就会出现由炽烈代码调用的Javascript吗？

1 个答案: