如何将从服务接收到的数据传递到角度数据表

Question

我刚刚开始研究 Angular 4，我正在尝试将以 json 格式从 Angular 服务接收到的一些数据渲染到 Angular-datatable 中，但无论我尝试哪个选项，它都不适合我。表即将到来，列即将到来，但列内的数据未显示。

任何帮助都会很棒，

提前致谢..！！！！

请在下面找到我的代码：

组件.html

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

组件.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
   }]
  };
 }
}

组件.服务

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'));
 }

}

测试.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"
 }]

Answer 1

您在订阅之外设置 dtOptions。

如果执行此操作，fleetData 将保持为空，因此 dtOptions 永远不会正确设置，因为 Observable 是异步的。我建议这个代码：

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），当加载数据时，您将显示数据表