OnClick 在 Blazor WASM 中显示/隐藏谷歌地图 div 元素

ion 发表于 Dev

离子

我想在按钮点击动作上显示/隐藏地图。我试图通过设置一个 bool 变量来实现这一点，我在点击操作中设置/重置该变量并在剃刀页面中检查它，如下例所示：

        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        protected bool displayMap = false;

        protected async Task OpenMap()
        {
            displayMap = !displayMap;
            if (displayMap)
            {
                await JSRuntime.InvokeVoidAsync("initialize", null);
            }
        }

            @if (displayMap)
            { 
                <MudCard>
                    <MudCardContent>
                        <div id="map" style="height:500px;width:100%;">
                        </div>
                    </MudCardContent>
                </MudCard>
            }

但似乎这个解决方案不起作用，因为我收到一个渲染错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：Map：预期的 Element 类型的 mapDiv 但传递为 null。错误

似乎在呈现 div 之前调用了 initialize 函数，但我不知道如何解决这个问题。请帮忙！

亨克·霍尔特曼

当您想在显示/隐藏之间保持地图状态时，而不是

@if (displayMap)
{ 
    <MudCard>
        <MudCardContent>
            <div id="map" style="height:500px;width:100%;">
            </div>
        </MudCardContent>
    </MudCard>
}

您可以使用

<MudCard hidden="@(!displayMap)">
    <MudCardContent>
        <div id="map" style="height:500px;width:100%;">
        </div>
    </MudCardContent>
</MudCard>

结合

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("initialize", null);
    }
}

并await JSRuntime.InvokeVoidAsync(...)从按钮单击中删除该行。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。