Blazor 更新组件 foreach 循环内的 UI

Question

我的 Blazor 组件与此类似：

主剃须刀

@foreach (Vehicle vehicle in _vehicles) 
{
    if (vehicle.Visible)
    {
        <VehicleComponent Vehicle=@vehicle></VehicleComponent>
    }
}

@code {
    protected override void OnInitialized() 
    {
        _vehicles = new List<Vehicles>();
        // -> _vehicles being filled here
        base.OnInitialized();
    }
}

VehicleComponent.razor

@if (Vehicle != null) 
{
    <img src="@(Vehicle.src)"/>
    <div id="@(Vehicle.Id)" tabindex="@(Vehicle.tabindex)">
        <h3>@(Vehicle.text)</h3>
    </div>
}

@code {
    [Parameter] public Vehicle Vehicle { get; set; }
}

问题是VehicleComponent循环内的所有 s 都是在循环完成后渲染的。但我希望组件在渲染下一个列表项之前完全渲染。

我尝试StateHasChanged()在 中的每个项目之后使用Main.razor，但出现无限循环。有没有办法可以在循环中依次渲染每个组件（并更新 UI）？

Answer 1

如果你想要“逐渐出现”物品的视觉效果：

protected override async Task OnInitializedAsync () 
{
    var temp =  new List<Vehicles>(); 
    // -> _vehicles being filled here

    _vehicles = new List<Vehicles>();
    foreach (var vehicle in temp)
    {
       _vehicles.Add(vehicle);
       StateHasChanged();
       await task.Delay(500);  // adjust the delay to taste
    }
}

但请注意，这是一种昂贵（缓慢）的展示方式。
使用@key不会改善这一点，但当您稍后更改列表时可能会有所帮助：

 <VehicleComponent @key=vehicle Vehicle=@vehicle></VehicleComponent>