时间戳

首页 > 解决方案 > Fullcalendar 5 resourceLabelContent 返回承诺

angular - Fullcalendar 5 resourceLabelContent 返回承诺

问题描述

我正在使用带有 Angular 的 FullCalendar 5。我想根据数据库中的数据显示自定义资源标签。我使用资源渲染挂钩resourceLabelContent返回一个 HTML 字符串。为了获得我需要的数据，我必须使用async和await将函数定义为异步函数（参见下面的代码示例）。

我的问题是：一旦我将关键字 async 添加到我的函数中，资源标签就不再显示了。我认为这是因为该函数现在返回一个 Promise 而不是 "{ html : '..' }。

我想要做什么：我有根据日期附加到不同地方（资源）的用户。我想使用 resourceLabelContent 在资源标签下方显示用户的名称。因此，我必须请求我的数据库来检索它们并发出异步请求。

有没有办法使用异步功能显示资源标签，或者我应该避免它？

代码示例：

async resourceLabelContent(info) {    

  const date = info.date;
  const usersAvailable= await this.service.getUsersAvailable(date, info.resource.id);

  return { html: '<span>'+ usersAvailable+'</span> }
}

以防万一，我如何绑定我的函数：

this.calendarOptions.resourceLabelContent = this.resourceLabelContent.bind(this);

编辑：为了更清楚，我添加了我需要对 resourceLabelContent 做什么的描述

标签： angulartypescriptasync-awaitfullcalendar

解决方案

由于您的函数 is async， is 返回 a Promise。所以，为了使用它，你必须改变你的调用代码

resourceLabelContent()
.then(response => response.json())
.then(data => console.log(data)) // <-- Here is your expected data

试试看！

推荐阅读