如何将从服务接收的数据传递到angular datatable
如何将从服务接收的数据传递到angular datatable
提问于 2017-11-28 17:23:49
我刚刚开始在Angular 4上工作，我正在尝试将我从angular服务收到的一些json格式的数据呈现到angular-datatable中，但无论我尝试哪个选项，它对我都不起作用。表来了，列来了，但是列中的数据没有显示。
任何帮助都是最好的，
提前感谢..！
请在下面找到我的代码：
component.html
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>component.ts
import { Component, OnInit } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { Subject } from 'rxjs/Subject';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
private fleetData: any;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
constructor(private getFleetData:FleetDataService) { }
ngOnInit() {
this.getFleetData.getFleetData().subscribe(
fleetData => {
this.fleetData = fleetData;
console.log(this.fleetData);
this.dtTrigger.next();
},
err => {
console.log(err);
}
);
this.dtOptions = {
pagingType: 'full_numbers',
columns: [{
title: 'First Name',
data: this.fleetData
}, {
title: 'Last Name',
data: this.fleetData
}, {
title: 'Score',
data: this.fleetData
}]
};
}
}component.service
import { Injectable } from '@angular/core';
import { HttpModule, Http, Response, Headers, RequestOptions } from
'@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class FleetDataService {
constructor(private http: Http) { }
getFleetData() {
return this.http.get("../../assets/data/test.json")
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server
Error'));
}
}test.json
[{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
}]回答 1
Stack Overflow用户
发布于 2017-11-28 17:31:47
您在订阅之外设置了dtOptions。
如果这样做，fleetData将保持为空，因此dtOptions永远不会正确设置，因为可观察对象是异步的。我建议使用以下代码：
export class DashboardComponent implements OnInit {
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
constructor(private getFleetData:FleetDataService) { }
ngOnInit() {
this.getFleetData.getFleetData().subscribe(
fleetData => {
console.log(fleetData);
this.buildDtOptions(fleetData)
this.dtTrigger.next();
},
err => {
console.log(err);
});
}
private buildDtOptions(fleetData: any): void {
this.dtOptions = {
pagingType: 'full_numbers',
columns: [
{title: 'First Name', data: fleetData},
{title: 'Last Name', data: fleetData},
{title: 'Score', data: fleetData}
]
};
}
}对于此错误：ERROR TypeError: Cannot read property 'aDataSort' of undefined。您可以在视图中执行微调控制项(ngIf / else)，并在加载数据时显示数据表
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47527954
复制相关文章
相似问题
腾讯云开发者
