如何从json而不是table-data.ts获取数据 我很困惑。尽我所能找不到解决方案。我应该做哪些改动我认为来自私人数据：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
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>
答案 0 :(得分：0)
如果您想在其他文件中使用TableData，则必须将其导入。我在顶部添加了一个示例，向您展示如何导入它。您所做的只是创建另一个文件并导入您需要的内容。我整理了你的代码并修复了一些语法错误，并在未定义东西的位旁边添加了一些注释，这会引发错误，还会在如何导入内容的顶部附近做一些解释：
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);
}
}
答案 1 :(得分：0)
我希望这是你的意思。我通过这种方式从外部源（不是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);
}
在此示例中，我的数据是用户。我从我的数据服务中调用它。我希望它有所帮助。