0

我正在使用 SharePoint 框架处理 Web 部件，我的代码基本上是调用两种方法从 SharePoint Online 获取信息，当我在我的render()方法上调用这些方法时，我得到如下内容：

--- 渲染开始 ---

--- 渲染完成 ---

  • GetItems() => ID：1 标题：新办公室
  • GetItems() => ID：2 标题：中期评论
  • GetItems() => ID：3 标题：DevOps 培训

  • GetItems() => ID：4 标题：与我们合作！

    - GetAttachments() => ID：2文件名 ：reviews.jpeg

    - GetAttachments() => ID：1 文件名：new-office.jpg

    - GetAttachments() => ID：3 文件名：devops.jpeg

    - GetAttachments() => ID：4文件名 ：careers.png

我期待调用这些方法并将它们的结果返回给我，然后在我的自定义 HTML 渲染中使用它们，预期的结果将是这样的：

--- 渲染开始 ---

  • GetItems() => ID：1 标题：新办公室

    - GetAttachments() => ID：1 文件名：reviews.jpeg

  • GetItems() => ID：2 标题：中期评论

    - GetAttachments() => ID：2 文件名：new-office.jpg

  • GetItems() => ID：3 标题：DevOps 培训

    - GetAttachments() => ID：3 文件名：devops.jpeg

  • GetItems() => ID：4 标题：与我们合作！

    - GetAttachments() => ID：4文件名 ：careers.png

--- 渲染完成 ---

// 使用自定义 HTML 中的返回结果进行渲染

现在代码“狂野”地运行，htmlAttachments 变量没有收到任何结果，并且渲染完全空白，我应该怎么做才能在渲染之前获得结果？

这是我的代码：

public async GetItems() : Promise<IListItems>
  {
    let formattedResponse: IListItems = {value: []};

    await pnp.sp.web.lists.getByTitle('LIST').items.select('Id, Title, Body, Link').get().then( response => {
      response.map( (object: any, i: number) => {
        formattedResponse.value.push( {Id : object.Id, Title: object.Title, Body: object.Body, Link : object.Link.Url} );
      });      
    });

    return formattedResponse;
  }

  public async GetAttachments(itemId: number) : Promise<IFileItems>
  {
    let formattedResponse: IFileItems = {value: []};

    await pnp.sp.web.lists.getByTitle('LIST').items.getById(itemId).attachmentFiles.get().then( response => {
      response.map( (object: any, i: number) => {
        formattedResponse.value.push( {Id : itemId, FileName: object.ServerRelativeUrl} );
      });
    });

    return formattedResponse;
  }

  public render() : void
  {
    let htmlAttachments: string = '';

    htmlAttachments += '<ul>';

    this.GetItems().then( (responseItems: IListItems) => {
      responseItems.value.forEach( elementItems => {
        console.log("GetItems() ==> ", elementItems.Id, elementItems.Title);
        this.GetAttachments(elementItems.Id).then( (responseAtt: IFileItems) => {
          responseAtt.value.forEach( elementAtt => {
            console.log("\t GetAttachments() ==> ", elementAtt.Id, elementAtt.FileName);
            htmlAttachments += '<li>' + 'ID: ' + elementAtt.Id + ' - Title: ' + elementAtt.FileName + '</li>';
          });
        });
      });
    });

    htmlAttachments += '</ul>';

    this.domElement.innerHTML = htmlAttachments;
  }
4

1 回答 1

0

这有点晚了，但你可以摆脱GetAttachments方法本身。

在第一次调用中，GetItems您可以获取附件文件，然后在 HTML 中使用它们。

您可以从以下示例代码进行修改：

public async GetItems() : Promise<IListItems>
{
    let formattedResponse: IListItems = {value: []};

    await pnp.sp.web.lists.getByTitle("LIST")
          .items
          .select("Id", "Title", "Body", "Link","AttachmentFiles")
          .expand("AttachmentFiles")
          .get()
          .then(response => {
          response.map((object: any, i: number) => {
            formattedResponse.value.push({
                Id : object.Id, 
                Title: object.Title, 
                Body: object.Body, 
                Link : object.Link.Url, 
                FileName: object.AttachmentFiles[0].FileName, 
                FileUrl : object.AttachmentFiles[0].ServerRelativeUrl
            });
          });
    });

    return formattedResponse;
}

参考 -在 PnP JS 中使用列表项

于 2018-09-04T07:03:17.367 回答