Razor组件-异步加载和显示数据

Question

我有一个Razor组件，它显示文章列表，我想在页面呈现后异步加载每一篇文章的图像，这样用户就可以看到图像一个接一个地出现在页面上。

问题是，我应该在哪里以及如何打这些电话？

HTML：

@foreach (Article article in articles)
{
<div>
<p>@article.name</p>
if (article.image != null) 
{
<img src="data:image/jpg;base64,@article.image">
}
</div>
}

代码：

List<Article> articles = new List<Article>();
protected override async Task OnInitializedAsync()
{
articles = LoadArticles(); //Asume this function initialises the article list
}
async Task LoadPicture(Article article)
{
await article.LoadImage(); //This will make the server call to get the base64 of the image
}

我需要为页面中的每一篇文章调用LoadPicture函数，但我希望异步调用，而不必等待所有调用来刷新整个页面。

我应该如何继续？

Answer 1

这里有一个粗略的例子，我在评论中描述了你可以做什么，它应该实现你最初想要的行为。

这样做意味着每个Article组件都要自己处理，以及何时应该渲染或更新它，并且每个获取图像数据的api调用都应该是独立的。

--文章列表组件

@foreach(var article in Articles)
{
<Article Model="article">
}

@code {
List<Article> Articles {get;set;}
protected override Task OnInitializedAsync()
{
return LoadArticlesAsync(); //Api call to get all articles list and which sets Articles.
}

}

--文章.razor组件

@if (Model != null)
{
<h1> @Model.Title </h1>
@if (_imageLoaded)
{
<img src="@ImageBase64"/>
}
}
@code
{
[Parameter]
public Article Model {get;set;}
private bool _imageLoaded = false;
private string ImageBase64 {get;set;}
protected override async Task OnInitializedAsync()
{
ImageBase64 = await LoadArticleImage();
_imageLoaded = true;
}
}