Question

我刚刚开始研究Angular 4，我试图将我从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"
 }]

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），并在加载数据时显示数据表

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

1 个答案: