數據表角4

Question

[ANGULAR 4 - TS] 我使用的METRONIC主題和它的DataTable來自遠程位置是這樣的：

var DatatableJsonRemoteDemo = function() { 
//== Private functions 

// basic demo 
var demo = function() { 

    var datatable = $('.m_datatable').mDatatable({ 
     // datasource definition 
     data: { 
      type: 'remote', 
      source: 'http://localhost/ci/api/Users', 
      pageSize: 10, 
      saveState: { 
       cookie: true, 
       webstorage: true 
      } 
     }, 

但是我的API使用heaader，我必須通過KEY，我該如何做到這一點，以適應這個要求的關鍵？我在哪裏可以通過console.log來查看我的返回？ PS：通過帖子的步驟謝謝

Answer 1

我使用Metronic與Angular v5.0.5。 爲了從你需要一個遠程位置創建一個DataTable，

進口，讓你需要

import { KeyService } from '../path.to.services/key.service';

然後在組件構造函數中調用它關鍵服務

constructor (private _keyService:KeyService) {}

在ngOnInit（）鉤子，創建你的選擇陣列，（我將只集中於數據部分）

let options = { 
     data: { 
     type: 'remote', 
     source: { 
      read: { 
       url: 'http://your_API_URL.com', 
       method: 'POST', 
       headers: { 'Key': this._keyService.getKey()}, 
      } 
     }, 
     pageSize: 10, 
     saveState: { 
      cookie: true, 
      webstorage: true 
     } 
     } 

與

let yourdatatable = (<any>$('#TheIdDataTable')).mDatatable(options);

注創建數據表：

• 如果你想要要使用GET方法，您需要至少擁有Metronic的5.0.4版本，因爲在POST方法在主題中進行了硬編碼之前。請參閱this

• 要使用console.log，只需將它放在構造函數或ngOnInit掛鉤中的任何位置即可。

• 如果你只是想看看你的API請求的返回剛進去你的導航控制檯的網絡部分，由XHR過濾請求，並獲取並找到對應於你的DataTable中的一個（像users?datatable%5Bquery%5D=）

• 爲了顯示您的結果，您可能需要使用函數映射它們，我邀請您閱讀Metronic Documentation並查找data.source.read.map部分。

祝你好運！