使用數據表從服務提取數據（TeraData共價）

Question

我想從服務中提取數據並使用Covalent在數據表中顯示它們，這是我似乎無法弄清楚如何去做的唯一問題。最初是使用datable的twitter引導，它工作正常。我使用共價鍵進行材料設計2，這是唯一卡住的部分。

這裏是我的組件

getSpReceiptsList(){ 
    //console.log(this.webApiPathService.getWebApiPath('get-sp-receipts').path); 
    this.getReceiptService.getReceipts(this.webApiPathService.getWebApiPath('get-sp-receipts').path, this.token) 
    .subscribe(response => { 
     if(response){ 
      this.spReceiptsList = this.getReceiptService.getReceiptsList(); 
      this.spReceiptsList.forEach((object)=>{ 
       let paymentDate = new Date(object.paymentDate); 
       let year = paymentDate.getFullYear(); 
       let month = paymentDate.getMonth()+1; 
       let dt = paymentDate.getDate();  
       let hours = paymentDate.getHours(); 
       let minutes = paymentDate.getMinutes(); 
       let seconds = paymentDate.getSeconds(); 
       object.paymentDate = dt+'-' + month + '-'+year+' '+hours+':' + minutes + ':'+seconds; 
      }); 

     }else{ 
      this.snackBar.open('No receipts exist', '', { 
        duration: 2000, 
      }); 
     } 
    }, 
    errMsg => { 
     this.snackBar.open(errMsg, '', { 
      duration: 2000, 
     }); 
     console.log(errMsg); 
    }); 
} 

    //Covalent 
    data: any[] = [ 
    { approve: 'True', serviceName: 'Hotel', userName: 'gbrigens', amount: 1000, paymentDate: '12/08/2017' }, 
    ]; 
    columns: ITdDataTableColumn[] = [ 
    { name: 'approve', label: 'APPROVE', tooltip: 'Approve' }, 
    { name: 'serviceName', label: 'SERVICE NAME' }, 
    { name: 'userName', label: 'USER NAME' }, 
    { name: 'amount', label: 'AMOUNT' }, 
    { name: 'paymentDate', label: 'PAYMENT DATE' } 
    ]; 

    filteredData: any[] = this.data; 
    filteredTotal: number = this.data.length; 

    searchTerm: string = ''; 
    fromRow: number = 1; 
    currentPage: number = 1; 
    pageSize: number = 5; 
    sortBy: string = 'approve'; 
    selectedRows: any[] = []; 
    sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending; 

    sort(sortEvent: ITdDataTableSortChangeEvent): void { 
    this.sortBy = sortEvent.name; 
    this.sortOrder = sortEvent.order; 
    this.filter(); 
    } 

    search(searchTerm: string): void { 
    this.searchTerm = searchTerm; 
    this.filter(); 
    } 

    page(pagingEvent: IPageChangeEvent): void { 
    this.fromRow = pagingEvent.fromRow; 
    this.currentPage = pagingEvent.page; 
    this.pageSize = pagingEvent.pageSize; 
    this.filter(); 
    } 

    filter(): void { 
    let newData: any[] = this.data; 
    let excludedColumns: string[] = this.columns 
    .filter((column: ITdDataTableColumn) => { 
     return ((column.filter === undefined && column.hidden === true) || 
       (column.filter !== undefined && column.filter === false)); 
    }).map((column: ITdDataTableColumn) => { 
     return column.name; 
    }); 
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns); 
    this.filteredTotal = newData.length; 
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder); 
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize); 
    this.filteredData = newData; 
    } 

模板，以顯示錶

<div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm"> 
    <span *ngIf="!searchBox.searchVisible" class="push-left-sm"> 
    <span class="md-title">Receipts</span> 
    </span> 
    <span *ngIf="!searchBox.searchVisible" class="push-left-sm"> 
    <span *ngIf="(selectable && !selectedRows.length) || !selectable" class="md-title">Receipts</span> 
    <span *ngIf="selectedRows.length && selectable" class="md-body-1">0 item(s) selected</span> 
    </span> 
    <td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex> 
    </td-search-box> 
</div> 
<md-divider></md-divider> 
<td-data-table 
    #dataTable 
    [data]="filteredData" 
    [columns]="columns" 
    [selectable]="selectable" 
    [clickable]="clickable" 
    [multiple]="multiple" 
    [sortable]="true" 
    [sortBy]="sortBy" 
    [(ngModel)]="selectedRows" 
    [sortOrder]="sortOrder" 
    (sortChange)="sort($event)"> 
</td-data-table> 
<div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center"> 
    <h3>No results to display.</h3> 
</div> 
<td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)"> 
    <span hide-xs>Rows per page:</span> 
    <md-select [style.width.px]="50" [(ngModel)]="pageSize"> 
    <md-option *ngFor="let size of [5,10,15,20]" [value]="size"> 
     {{size}} 
    </md-option> 
    </md-select> 
    {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span> 
</td-paging-bar> 

而且最後我的服務

getReceipts(path: string, token: string): Observable<Boolean>{ 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('x-access-token', token); 
     headers.append('Accept', 'application/json'); 
     let requestoptions = new RequestOptions({ 
      headers: headers 
     }); 


     let urlPath: string = this.authUrl + path; 
     console.log(urlPath); 
     return this.http 
      .get(urlPath, requestoptions) 
      .map((res: Response) => { 
       let test: Array<SpReceiptModel> = res.json();   
       this.spReceiptList = test; 
       if(this.spReceiptList.length !== 0){ 
        return true; 
       }else{ 
        return false; 
       } 
      }) 
      .catch((err) => this.handleError(err)); 
    } 

Answer 1

在你的組件，你錯過來電過濾器（）函數來更新在您的數據表中，您可以定義您的屬性數據：

[數據] = 「filteredData」

然後在組件需要調用

this.filter（）

在此的forEach

的端

this.spReceiptsList.forEach((object)=>{ 
      let paymentDate = new Date(object.paymentDate); 
      let year = paymentDate.getFullYear(); 
      let month = paymentDate.getMonth()+1; 
      let dt = paymentDate.getDate();  
      let hours = paymentDate.getHours(); 
      let minutes = paymentDate.getMinutes(); 
      let seconds = paymentDate.getSeconds(); 
      object.paymentDate = dt+'-' + month + '-'+year+' '+hours+':' + minutes + ':'+seconds; 
     }); 
this.filter(); 

以及你錯過更新該變量，或者您可以設置的，而不是調用this.filter（）之後

this.filteredData = this.spReceiptsList;