我想在點擊按鈕的動作中顯示/隱藏地圖。我試圖通過設定一個bool變數來實作這個目標，我在點擊動作中設定/重置了這個變數，并在剃刀頁面中檢查它，就像下面的例子：
[Inject]
public IJSRuntime JSRuntime { get; set; }
protected bool displayMap = false;
protected async Task OpenMap()
{
displayMap = !displayMap;
如果(displayMap)
{
await JSRuntime.InvokeVoidAsync("初始化", null)。
}
}
@if (displayMap)
{
<MudCard>
<MudCardContent>
<div id="map" style="height:500px;width:100%;" >
</div>
</MudCardContent>
</MudCard>
}
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 。 渲染組件時出現未處理的例外。地圖。預計mapDiv為Element型別，但被傳遞為null。 Error
似乎初始化函式是在 div 渲染之前呼叫的，但我不知道如何解決這個問題。請幫助！
uj5u.com熱心網友回復：
當你想在顯示/隱藏之間保持地圖的狀態時，那么就用
代替@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)
{
如果(firstRender)
{
await JSRuntime.InvokeVoidAsync("initialize", null)。
}
}
并且從點擊按鈕中移除await JSRuntime.InvokeVoidAsync(...)一行。
uj5u.com熱心網友回復：
問題在于，在你設定displayMap=true之后，Blazor UI并沒有立即重新渲染，所以當JS initialize()函式尋找#map的時候，它什么都沒有找到。
似乎初始化函式是在div被渲染之前被呼叫的
。
完全正確。
簡單的修復方法：
protected async Task OpenMap()
{
displayMap = !displayMap;
如果(displayMap)
{
await Task.Delay(1); // 允許Render的發生
await JSRuntime.InvokeVoidAsync("initialize", null);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/311667.html
標籤：