테이블의 정적 JSON에서 데이터를 가져 오는 방법 ng-2 테이블을 사용하는 https://github.com/valor-software/ng2-table.iam

Question

table-data.ts가 아닌 json에서 데이터를 가져 오는 방법 iam 혼란스러워. 내 최고의 cant solution.where 찾을 수 개인 데이터에서 생각하는 변경해야합니까 : array = TableData; 누군가가 해결책을 제시하면 도움이 될 것입니다.

Demo.component.ts

export class TableDemoComponent implements OnInit { public rows:Array<any> = []; 
public columns:Array<any> = [ 
{title: 'Company', name: 'name', filtering: {filterString: '', placeholder: 'Filter by name'}}, 
{ 
    title: 'Position', 
    name: 'position', 
    sort: false, 
    filtering: {filterString: '', placeholder: 'Filter by position'} 
}, 
{title: 'Location', name: 'office', sort: '', filtering:  {filterString: '', placeholder: 'Filter by Location'}}, 
{title: 'Date', className: 'text-warning', name: 'startDate'},]; 
public page:number = 1; 
public itemsPerPage:number = 10; 
public maxSize:number = 5; 
public numPages:number = 1; 
public length:number = 0; 
public config:any = { 

paging: true, 
sorting: {columns: this.columns}, 
filtering: {filterString: ''}, 
className: ['table-striped', 'table-bordered'] 
}; 
private data:Array<any> = TableData; 
public constructor() { 
this.length = this.data.length; 
} 
public ngOnInit():void { 
this.onChangeTable(this.config); 
} 
public changePage(page:any, data:Array<any> = this.data):Array<any> { 
let start = (page.page - 1) * page.itemsPerPage; 
let end = page.itemsPerPage > -1 (startpage.itemsPerPage):data.length; 
return data.slice(start, end); 
} 
public changeSort(data:any, config:any):any { 
if (!config.sorting) { 
    return data; 
} 
let columns = this.config.sorting.columns || []; 
let columnName:string = void 0; 
let sort:string = void 0; 
for (let i = 0; i < columns.length; i++) {  if(columns[i].sort!==''&&columns[i].sort!==false{columnNamecolumns[i].name; 
    sort = columns[i].sort; 
    } 
} 
if (!columnName) { 
    return data; 
} 
// simple sorting 
return data.sort((previous:any, current:any) => { 
    if (previous[columnName] > current[columnName]) { 
    return sort === 'desc' ? -1 : 1; 
    } else if (previous[columnName] < current[columnName]) { 
    return sort === 'asc' ? -1 : 1; 
    } 
    return 0; 
    }); 
    } 
    public changeFilter(data:any, config:any):any { 
    let filteredData:Array<any> = data; 
    this.columns.forEach((column:any) => { 
    if (column.filtering) { 
    filteredData = filteredData.filter((item:any) => { 
    return item[column.name].match(column.filtering.filterString); }); 
    } 
    }); 
if (!config.filtering) { 
    return filteredData; 
} 
if (config.filtering.columnName) { 
    return filteredData.filter((item:any) =>  item[config.filtering.columnName].match(this.config.filtering.filterString)); 
} 
let tempArray:Array<any> = []; 
filteredData.forEach((item:any) => { 
    let flag = false; 
    this.columns.forEach((column:any) => { 
    if  (item[column.name].toString().match(this.config.filtering.filterString)) { 
     flag = true; 
    } 
    }); 
    if (flag) { 
    tempArray.push(item); 
    } 
}); 
filteredData = tempArray; 
return filteredData; 
} 
public onChangeTable(config:any, page:any = {page: this.page,itemsPerPage: this.itemsPerPage}):any { 
if (config.filtering) { 
    Object.assign(this.config.filtering, config.filtering); 
} 
if (config.sorting) { 
    Object.assign(this.config.sorting, config.sorting); 
} 
let filteredData = this.changeFilter(this.data, this.config); 
let sortedData = this.changeSort(filteredData, this.config); 
this.rows = page && config.paging ? this.changePage(page,sortedData):sortedData; 
this.length = sortedData.length; 
} 
public onCellClick(data: any): any { 
console.log(data); 
}} 

Datatable.ts 다른 파일에 TableData을 사용하고자하는 경우

export const TableData:Array<any> = [ 
{ 
'name': 'Victoria Cantrell', 
'position': 'Integer Corporation', 
'office': 'Croatia', 
'ext': `<strong>0839</strong>`, 
'startDate': '2015/08/19', 
'salary': 208.178 
}, { 
'name': 'Pearl Crosby', 
'position': 'In PC', 
'office': 'Cambodia', 
'ext': `<strong>8262</strong>`, 
'startDate': '2014/10/08', 
'salary': 114.367 
}, { 
'name': 'Colette Foley', 
'position': 'Lorem Inc.', 
'office': 'Korea, North', 
'ext': '8968', 
'startDate': '2015/07/19', 
'salary': 721.473 
} 
]; 

테이블 demo.html

 <div class="row"> 
     <div class="col-md-4"> 
     <input *ngIf="config.filtering" placeholder="Filter allcolumns" 
     [ngTableFiltering]="config.filtering" 
     class="form-control" 
     (tableChanged)="onChangeTable(config)"/> 
     </div> 
     </div> 
     <br> 
     <ng-table [config]="config" 
     (tableChanged)="onChangeTable(config)" 
     (cellClicked)="onCellClick($event)" 
     [rows]="rows" [columns]="columns"> 
     </ng-table> 
     <pagination *ngIf="config.paging" 
     class="pagination-sm" 
     [(ngModel)]="page" 
     [totalItems]="length" 
     [itemsPerPage]="itemsPerPage" 
     [maxSize]="maxSize" 
     [boundaryLinks]="true" 
     [rotate]="false" 
     (pageChanged)="onChangeTable(config, $event)" 
     (numPages)="numPages = $event"> 
     </pagination> 

Answer 1

당신 그것을 가져올 것입니다. 맨 위에 가져 오는 방법을 보여주는 예제가 추가되었습니다. 단지 다른 파일을 만들고 필요한 것을 가져 오기만하면됩니다. 난 당신의 코드를 정돈하고 약간의 구문 오류를 수정하고 다음 것을 가져 오는 방법에 정상에 물건도 오류를 던져 몇 가지 설명을 넣을 것이다 정의되지 않은했다 비트 옆에 몇 가지 메모를 넣어 :이 희망

import {OnInit} from "@angular/core" 
import {TableData} from "./test2" //test2 is the name of the file 

// ./ current directory 
// ../../ up two directories 

export class TableDemoComponent implements OnInit { 
    public rows: Array<any> = []; 

    public columns: Array<any> = 
     [ 
      { 
       title: 'Company', 
       name: 'name', 
       filtering: { 
        filterString: '', placeholder: 'Filter by name' 
       } 
      }, 
      { 
       title: 'Position', 
       name: 'position', 
       sort: false, 
       filtering: { 
        filterString: '', placeholder: 'Filter by position' 
       } 
      }, 
      { 
       title: 'Location', 
       name: 'office', 
       sort: '', 
       filtering: { 
        filterString: '', placeholder: 'Filter by Location' 
       } 
      }, 
      { 
       title: 'Date', 
       className: 'text-warning', 
       name: 'startDate' 
      } 
     ]; 

    public page: number = 1; 
    public itemsPerPage: number = 10; 
    public maxSize: number = 5; 
    public numPages: number = 1; 
    public length: number = 0; 

    public config: any = { 
     paging: true, 
     sorting: {columns: this.columns}, 
     filtering: {filterString: ''}, 
     className: ['table-striped', 'table-bordered'] 
    }; 

    private data: Array<any> = TableData; 

    public constructor() { 
     this.length = this.data.length; 
    } 

    public ngOnInit(): void { 
     this.onChangeTable(this.config); 
    } 

    public changePage(page: any, data: Array<any> = this.data): Array<any> { 
     let start = (page.page - 1) * page.itemsPerPage; 

     //startpage is not defined 
     let end = page.itemsPerPage > -1 ? startpage.itemsPerPage : data.length; 
     return data.slice(start, end); 
    } 

    public changeSort(data: any, config: any): any { 
     if (!config.sorting) { 
      return data; 
     } 

     let columns = this.config.sorting.columns || []; 
     let columnName: string = void 0; 
     let sort: string = void 0; 

     for (let i = 0; i < columns.length; i++) { 
      if (columns[i].sort !== '' && columns[i].sort !== false) { 
       //columnNamecolumns is not defined 
       columnNamecolumns[i].name; 
       sort = columns[i].sort; 
      } 
     } 

     if (!columnName) { 
      return data; 
     } 

     // simple sorting 
     return data.sort((previous: any, current: any) => { 
      if (previous[columnName] > current[columnName]) { 
       return sort === 'desc' ? -1 : 1; 
      } else if (previous[columnName] < current[columnName]) { 
       return sort === 'asc' ? -1 : 1; 
      } 
      return 0; 
     }); 
    } 

    public changeFilter(data: any, config: any): any { 
     let filteredData: Array<any> = data; 
     this.columns.forEach((column: any) => { 
      if (column.filtering) { 
       filteredData = filteredData.filter((item: any) => { 
        return item[column.name].match(column.filtering.filterString); 
       }); 
      } 
     }); 
     if (!config.filtering) { 
      return filteredData; 
     } 
     if (config.filtering.columnName) { 
      return filteredData.filter((item: any) => item[config.filtering.columnName].match(this.config.filtering.filterString)); 
     } 
     let tempArray: Array<any> = []; 
     filteredData.forEach((item: any) => { 
      let flag = false; 
      this.columns.forEach((column: any) => { 
       if (item[column.name].toString().match(this.config.filtering.filterString)) { 
        flag = true; 
       } 
      }); 
      if (flag) { 
       tempArray.push(item); 
      } 
     }); 
     filteredData = tempArray; 
     return filteredData; 
    } 

    public onChangeTable(config: any, page: any = {page: this.page, itemsPerPage: this.itemsPerPage}): any { 
     if (config.filtering) { 
      Object.assign(this.config.filtering, config.filtering); 
     } 
     if (config.sorting) { 
      Object.assign(this.config.sorting, config.sorting); 
     } 
     let filteredData = this.changeFilter(this.data, this.config); 
     let sortedData = this.changeSort(filteredData, this.config); 
     this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData; 
     this.length = sortedData.length; 
    } 

    public onCellClick(data: any): any { 
     console.log(data); 
    } 
} 

Answer 2

을 니가 의미하는 것. 나는 외부 소스에서 내 데이터를 읽고있다 (안 JSON -하지만이 같은 생각)이 방법에 의해 :

public constructor(private dataService: DataService){ 
     this.dataService.getUsers().then(users => {this.data = users; this.length = this.data.length;}). 
     catch(error => this.error = error); 
    } 

    public ngOnInit():void { 
     this.dataService.getUsers().then(users => {this.data = users; this.onChangeTable(this.config);}). 
     catch(error => this.error = error); 
    } 

이 예제에서 내 데이터는 사용자입니다. 내 데이터 서비스에서 호출하고 있습니다. 나는 그것이 도움이되기를 바랍니다.