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

Posted 2023-03-27

【中文标题】在 html 属性中调用 blazor 中的异步方法

【英文标题】：Call async method in blazor in html attribute

【发布时间】：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)"  >
         </video>
  </div>

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

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

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

【参考方案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