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

Question

这是我遇到的另一个问题。我的 AddIn 工作正常，我只有三个 API 调用，它们都可以工作。但是，其中两个调用需要一些时间才能 return 数据。通知用户该过程仍然运行我想要一个加载面板。在我的 taskspane.html 中，我有一个 div 叫做：

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

div 的样式使用 CSS。我在默认情况下隐藏 de DIV 的 div 添加了一个 class。我还有一个 class (showLoader)，它具有显示 DIV.

的样式

.showLoader {
  visibility: visible;
  display: block;
}

.hideLoader {
  visibility: hidden;
  display: none;
}

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

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

当我调试运行加载项时，我可以看到 DIV 的值设置正确，但是 DIV 没有显示。

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

 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 中有另一个函数做类似的事情，类似我的意思是操纵 classes元素（addClass 和 removeClass）。这很好用。当从（也）a buttonclick 执行此函数时，添加 class 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());
    }
  });
}

Answer 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();   
      });
    }

这个问题可以关闭了！

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

Office Addin toggle div (loading panel) in taskpane not working

html

javascript

css

jquery

office-js