If/else 在 Blazor C# 中使用 OnInitiliazedAsync 时无法正常工作

Question

<div class="form-inline justify-content-center mt-4">
    @if (Products != null && Products.Any())
    {
        @foreach (var product in Products)
        {
            #MyCode
        }
    }
    else 
    {
        <h2>This Store has no Products :)</h2>
    }
</div>
@code
{
    [Parameter]
    public int Id { get; set; }

    public IEnumerable<ProductDTO> Products { get; set; }
    protected override async Task OnInitializedAsync()
    {
        Products = await Store.GetStoreProducts(Id);
    }
}

它首先显示 else 部分，然后加载 if 部分（如果产品可用）。它应该像这样工作，如果产品可用，则不应加载其他部分。

Answer 1

现在您有两种状态，列表是 null/empty，或者列表至少有一个条目。问题是“null”表示列表正在加载，但“empty”表示列表 has 已加载且条目为零。你认为那些是一样的。

你需要三个状态。

正在加载列表（值为空）
列表已加载但没有条目（值为空列表）
列表已加载并且至少有一个条目

只需将您的 else 修改为 else if

@if (Products != null && Products.Any())
{
    @foreach (var product in Products)
    {
        #MyCode
    }
}
else if (Products != null && !Products.Any())
{
    <h2>This Store has no Products :)</h2>
}

如果Products为空，则不会激活if或else if，并且不打印任何内容。如果您愿意，您可以在之后添加一个 else 打印“正在加载...”。

请注意，这一切都有效，因为假设 Store.GetStoreProducts 永远不会 return null。

If/else 在 Blazor C# 中使用 OnInitiliazedAsync 时无法正常工作

If/else is not working properly with using OnInitiliazedAsync in Blazor C#

c#

if-statement

blazor

blazor-webassembly

lifecycle