Question

我正在尝试从restFul服务器读取json数据，并用结果填充智能表。我被困住了，似乎无法找到如何使它工作的方法。看来我能够从restFul服务器读取Json数据，但我不确定如何将其加载到智能表中。

非常感谢您的帮助！

以下是应用程序中使用的部分：服务（smart-table.service）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export interface LCQIWK {
  date: Date;
  rank: number;
  zone: string;
  enodeb: string;
  market: string;
  usid: number;
  impact: number;
  tnol: number;
  ret: number;
  acc: number;
  irat: number;
  tput: number;
  rtt: number;
}

    const REST_SERVER = 'http://nonprod-hywrca02-zltv3747-0001-   ingress.idns.cci.att.com:31840/thor';

    // import { LCQIWK } from './models/lcqiwk';

    @Injectable()
    export class SmartTableService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get<LCQIWK>(REST_SERVER + '/cqi/lte/wk')
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  }
}

cqi-table.component
import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import { LCQIWK, SmartTableService } from '../../../@core/data/smart-table.service';

// import { LCQIWK } from '../../../@core/data/models/lcqiwk';

@Component({
  selector: 'app-cqi-table',
  templateUrl: './cqi-table.component.html',
  providers: [ SmartTableService ],
  styleUrls: ['./cqi-table.component.scss']
})
export class CqiTableComponent {

  settings = {
    actions: false,
    columns: {
      date: {
        title: 'Date',
        type: 'number',
      },
      rank: {
        title: 'Rank',
        type: 'string',
      },
      zone: {
        title: 'ZONE',
        type: 'string',
      },
      enodeb: {
        title: 'eNodeB',
        type: 'string',
      },
      market: {
        title: 'Market',
        type: 'string',
      },
      usid: {
        title: 'USID',
        type: 'number',
      },
      impact: {
        title: 'Impact',
        type: 'number',
      },
      tnol: {
        title: 'TNoL',
        type: 'string',
      },
      ret: {
        title: 'RET',
        type: 'string',
      },
      acc: {
        title: 'ACC',
        type: 'string',
      },
      irat: {
        title: 'IRAT',
        type: 'string',
      },
      tput: {
        title: 'TPUT',
        type: 'number',
      },
      rtt: {
        title: 'RTT',
        type: 'number',
      },
    },
  };

  error: any;
  headers: string[];
  lcqiwk: LCQIWK;
  source: LocalDataSource = new LocalDataSource();

  constructor(private smartTableService: SmartTableService) {

    this.smartTableService.getData()
      .subscribe(
        (data: LCQIWK) => this.lcqiwk = { ...data }, // success path
        // this.source.load(this.lcqiwk),,
        error => this.error = error, // error path
      );
   }

  clear() {
    this.lcqiwk = undefined;
    this.error = undefined;
    this.headers = undefined;
  }

/*   showConfig() {
    this.smartTableService.getData()
      .subscribe(
        (data: LCQIWK) => this.lcqiwk = { ...data }, // success path
        // this.source.load(this.lcqiwk),
        error => this.error = error // error path
      );
  } */
}
// this.source.load(data);

Answer 1

尝试这种方式...

this.smartTableService.getData()
  .subscribe((data) => {
    for (let i = 0; i < data.length; i++) {
      data = {
        id: (i + 1),
        date   : data[i].date,
        rank   : data[i].rank,
        zone   : data[i].zone,
        enodeb : data[i].enodeb,
        market : data[i].market,
        usid   : data[i].usid
        // ... Add all data 

      }
      this.source.add(data)
    }
    this.source.refresh();
   });      
}

角度可观察物将json读入智能表

1 个答案: