Question

我正在使用SharePoint Framework处理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;
  }

Answer 1

有点晚了，但是您可以摆脱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;
}

参考-Working with List Items in PnP JS

React Rest呼吁赛车

1 个答案: