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

【问题标题】：Call async method in blazor in html attribute在 html 属性中调用 blazor 中的异步方法
【发布时间】：2021-03-24 01:38:24
【问题描述】：

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

“await”运算符只能在异步方法中使用。考虑使用 'async' 修饰符标记此方法并将其返回类型更改为 '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>

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

无法将 lambda 表达式转换为类型“对象”，因为它不是委托类型

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

【问题讨论】：

标签： razor lambda async-await delegates blazor

【解决方案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

【讨论】：