前言
在上一篇文章里，我們為大家介紹了如何創建SPFx Web部件，但是沒有說如何獲取SharePoint 網站資料，這篇文章，我們就為大家演示，如何利用串列資料模型和SharePoint SPFx模塊，讀取SharePoint 網站資料并展示出來，
正文
1.提前創建好資料串列，如下圖：
2.用Visual Studio Code打開Web部件檔案，如下圖：
3.在頭部定義串列模型，如下圖：
export interface ISPLists { value: ISPList[]; }
export interface ISPList { Title: string; Id: string; }
4.添加執行REST API請求的幫助程式類 spHttpClient
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
5.添加串列模型和幫助程式類位置，如下圖：
6.添加請求資料的方法，呼叫REST服務獲取資料，方法如下：
private _getListData(): Promise<ISPLists> { return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('MyList')/items`, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); }
7.添加渲染資料的方法，渲染成我們需要展示的格式，方法如下：
private _renderList(items: ISPList[]): void { let html: string = ''; items.forEach((item: ISPList) => { html += `<div>${item.Title}</div>`; }); const listContainer: Element = this.domElement.querySelector('#MyContainer'); listContainer.innerHTML = html; }
8.修改渲染Web部件的方法，將獲取的資料渲染到Web部件，方法如下：
public render(): void { this.domElement.innerHTML = `<div id="MyContainer" />`; this._getListData() .then((response) => { this._renderList(response.value); }); }
9.添加方法的位置，如下圖：
10.在SharePoint Online站點中測驗SPFx Web部件，如下圖：
結束語
至此，我們看到SPFx Web部件，已經獲取到了SharePoint Online站點中的串列資料，之后，我們就可以把部件部署到網站中，使用了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/850.html
標籤：SharePoint