任务窗格中的 Office 插件切换 div（加载面板）不起作用

Posted 2023-05-08

【中文标题】任务窗格中的 Office 插件切换 div（加载面板）不起作用

【英文标题】：Office Addin toggle div (loading panel) in taskpane not working

【发布时间】：2022-01-07 10:04:55

【问题描述】：

这是我遇到的另一个问题。我的插件工作正常，我只有三个 API 调用，它们都工作。但是，其中两个调用需要一些时间才能返回数据。为了通知用户进程仍在运行，我想要一个加载面板。在我的 taskspane.html 我有一个名为：

<div id="loader" class="hideLoader"></div>

div 使用 CSS 设置样式。我在 div 中添加了一个默认隐藏 de DIV 的类。我还有一个类 (showLoader)，它具有显示 DIV 的样式。

.showLoader 
  visibility: visible;
  display: block;


.hideLoader 
  visibility: hidden;
  display: none;

现在，当我执行一个检索数据的函数时，我有一个切换类的函数。

function toggleLoader(display: string) 
  if (display == 'show') 
    $("#loader").removeClass("hideLoader");
    $("#loader").addClass("showLoader");
  
  else 
    $("#loader").addClass("hideLoader");
    $("#loader").removeClass("showLoader");
      

当我调试正在运行的插件时，我可以看到 DIV 的值设置正确，但是 DIV 不显示。

调用toggelLoader-function的两个函数之一：

 export async  function getMapImage() 
    return Word.run(async context => 

    toggleLoader('show');
  
    title = $("#title").val() as string;
    scale = $("#map-scale").val() as number;
    language = $("#language").val() as string;

    $("#error").text("");
    let fetchUrl: string;

    fetchUrl = mapUrl.replace("[title]",title)
    .replace("[scale]",scale.toString())
    .replace("[lng]",language)

    projectObject.Description = $("#project-description").val() as string;
    projectObject.Client.Name = $("#project-client").val() as string;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
         
          method: 'POST',      
          headers: 
            "Content-type": "application/json; charset=UTF-8"
          ,     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        )
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .catch((error) => 
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Error retreiving the map!");
        );
    
        await context.sync();

        toggleLoader('hide');
      );
    

我不知道代码有什么问题。没有 javascript 异常。

插件使用 TypeScript 编码并使用 Yeoman 生成

更新（在 Rick 的评论之后）

奇怪的是我的 taskpane.ts 中有另一个函数，它做类似的事情，我的意思是操作元素的类（addClass 和 removeClass）。这工作正常。当从（也）buttonclick 执行此函数时，将添加 disabled 类并将元素显示为 disabled。

 export async function clearProjectInformation()
  return Word.run(async context =>

    $("#insertMap").addClass("disabled");
    $("#insertTable").addClass("disabled");

    $("#project-nr").val("");
    $("#project-id").text("");
    $("#project-description").val("");
    $("#project-location").text("");
    $("#project-client").val("");
    $("#error").text("");

    await context.sync();
  ).catch(function (error) 
  
    // eslint-disable-next-line no-undef
    if (error instanceof OfficeExtension.Error) 
      // eslint-disable-next-line no-undef
      console.log('Error code and message: ' + error.toString());
    
  );

【问题讨论】：

如果您直接调用toggleLoader()（不在Word.run() 内），是否有效？

嗨@RickKirkham，很遗憾没有。我通过将toggleLoader() 移动到export async function getMapImage() 之后和return Word.run(async context => 之前对此进行了测试。断点命中toggleLoader() 函数，但DIV 仍然不显示。这是你的意思吗？

【参考方案1】：

我终于找到了解决办法。代码的行为是正确的。但是由于function getMapImage() 的异步特性，最后的代码是在启动获取 wat 之后立即执行的。这种情况发生得如此之快，以至于无法查看切换加载器层是否有效。根据我的调试器信息，它确实工作了，但在屏幕上似乎什么也没发生。

解决方案是将 toggleLoader("hide") 函数从末尾移动到承诺代码。我的错误是没有想到代码执行的异步方式（我想到了传统的过程方式代码执行）。注意与问题中发布的原始功能相比，额外的.then()：

 export async  function getMapImage() 
    return Word.run(async context => 

      
    toggleLoader("show");

    title = $("#title").val() as string;
    scale = $("#map-scale").val() as number;
    language = $("#language").val() as string;

    $("#error").text("");
    let fetchUrl: string;

    fetchUrl = mapUrl.replace("[title]",title)
    .replace("[scale]",scale.toString())
    .replace("[lng]",language)

    projectObject.Description = $("#project-description").val() as string;
    projectObject.Client.Name = $("#project-client").val() as string;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
         
          method: 'POST',      
          headers: 
            "Content-type": "application/json; charset=UTF-8"
          ,     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        )
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .then(() => 
          toggleLoader("hide");
        )
        .catch((error) => 
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Fout bij het ophalen van de kaart!");
          toggleLoader("hide");
        );
    
        await context.sync();   
      );
      

这个问题可以结束了！