在 html 属性中调用 blazor 中的异步方法

Question

我正在尝试调用异步函数以从输入中检索数据并将其传递给元素的 src 或 style 属性，具体取决于它是什么。但是，当我尝试等待它时，出现以下错误：

The 'await' operator can only be used within an async method. Consider marking this method with the 'async' modifier and changing its return type to 'Task'

  <div class="swiper-slide" style="
        background-image: url(@await LinkConverter.GetLinkFromData(media)">
  </div>

但是当我尝试使用像这样的 lambda 表达式时：

  <div class="swiper-slide">
         <video src="@async () => await LinkConverter.GetLinkFromData(media, true)" width="320" height="240">
         </video>
  </div>

我收到以下错误（我不明白）：

Cannot convert lambda expression to type 'object' because it is not a delegate type

该函数位于 foreach 和一些 if 语句中，因此我宁愿不必在 OnIntializedAsync 处创建结果列表并最终重复我的代码。

Answer 1

我建议为此使用一个组件。

你的 foreach 可能是这样的

@foreach(var media in MediaItems)
{
  <DisplayMedia @key=media FetchMediaTask=@(()=>LinkConverter.GetLinkFromData(media)) />
}

而 DisplayMedia 将是

@typeparam T
<div class="swiper-slide" style="
      background-image: url(@Data)">
</div>
@code
{
 [Parameter] public Func<Task<T>> FetchMediaTask { get; set; }
 T Data;
 protected override async Task OnAfterRenderAsync(bool first)
 {
  if (first)
  {
   Data = (T)await FetchMediaTask();
   StateHasChanged();
  }
 }
}

这样就可以在Component中渲染divs并等待GetLinkFromData，支持

演示：https://blazorrepl.com/repl/GEbcFnEm587VpE6g22

在 html 属性中调用 blazor 中的异步方法

Call async method in blazor in html attribute

lambda

delegates

razor

async-await

blazor