Howard Lee Cloud

因為產品雛形第一版的開發時程短促，以及產品功能需要一個表格能夠搜尋各種資料欄位，經過一番找尋和初步試用後，認為應該能導入在產品裡面。本文是一些使用的心得和指南。本次使用 ng2-smart-table 的版本是 1.4.0，它不是此時的最新版本，因為要配合產品的 angular 框架版本 6，此版本是最後能適用在 angular 6 的版本號，之後的號碼是適用 angular 7 以上。

心得如下：

不要輕易使用 ng2-smart-table 的 ServerDataSource，因為能夠順利使用它的前提是：
- 後端 api endpoint 給的回應欄位 datakey 底下的欄位必須是要陣列，
- 而且陣列裡每個物件的特性(attribute)，必須沒有巢狀資料結構，例如：特性底下再一層物件，或者是陣列。換言之，不用去想要做欄位中又再有一層子欄位。
- 陣列裡的每個物件的特性名稱，必須相同於前端 ng2-smart-table 所使用的 settings 欄位名稱。如果欄位名稱對應不起來，前端對應不起來的那一欄會不顯示後端的資料。你如果沒有把握去修改後端系統的回應內容欄位，就不要去使用 ServerDataSource。
如果你要增加或修改 ServerDataSource 的功能，例如：後端系統的回應內容欄位不必要相同於 ng2-smart-table 的 settings 變數底下的欄位名稱，請記得一定要修改 getElement() 的實作內容，因為 getElements() 是發動向後端系統發出查詢資料要求的方法入口處，並且在這方法中的最後，會將回應內容的 datakey 對應的資料內容，存進 ServerDataSource 資料結構中，給 ServerDataSource 的其他方法使用。請看原始碼的 server.data-source.js 檔案的第 37 行，我建議做法是去繼承 ServerDataSource ，並且先將 \_this.data = \_this.extractDataFromResponse(res); 的 \_this.extractDataFromResponse(res); 的回應先暫時存在其他變數，並且去做你想要的欄位名稱轉換，接著才存入轉換欄位名稱後的資料內容存在 \_this.data 並且如原始碼繼續回傳 \_this.data 。

_this.data = _this.extractDataFromResponse(res); // origin
//
//
_tmp = _this.extractDataFromResponse(res); // modified

// 自定義的欄位名稱轉換 to result
_this.data = result;

ServerDataSource 、LocalDataSource 和 DataSource 的關係是，ServerDataSource 繼承於 LocalDataSource， LocalDataSource 又繼承於 DataSource。
如果想用 LocalDataSource 達成相同於 ServerDataSource 的換頁時去查後端系統資料，請做到以下內容：
- ng2-smart-table settings 設定每頁的資料筆數數量，一定要小於向後端系統查詢的每頁資料筆數，因為當向後端系統查詢獲得的資料筆數大於前端的每頁資料筆數時，ng2-smart-table 才會自動顯示它的 paginator UI 元件。如果向後端系統查詢獲得的資料筆數，小於或等於前端的每頁筆數，paginator UI 元件不會顯示。
- ng2-smart-table source 變數請記得使用 onChanged().subscribe() ，去撰寫程式碼，處理因為換頁時產生的 change.action 是 page 值，所需的對應行為，例如：向後端查詢下一頁的資料。提醒 1)請善用 DataSource 會發生的各種事件值，例如：refresh, load, page, filter, empty；2) 因為向後端查詢資料的每頁筆數不同於前端顯示的每頁筆數，所以請自行維護向後端查詢資料的每頁筆數和頁數的邏輯，例如：向後端系統的查詢時機、查詢下一頁的時機、當有篩選資料條件時每頁的資料筆數。

參考連結：

https://stackoverflow.com/a/55606968/2704360

Ng2-Smart-Table 的使用心得與方法