-2

我有以下 JSON：

{
"0": {
"open": 93.3,
"high": 96,
"low": 93.3,
"close": 95.04,
"volume": 358172,
"score": "100",
"symbol": "ZBRA",
"company_name": "Zebra Technologies Corp.",
"company_sector": "Industrial Goods"
},
"1": {
"open": 19.1396,
"high": 19.5578,
"low": 18.7612,
"close": 19.3587,
"volume": 185112,
"score": "100",
"symbol": "ZEUS",
"company_name": "Olympic Steel Inc.",
"company_sector": "Industrial Goods"
},
"2": {
"open": 40.4208,
"high": 41.1223,
"low": 39.9614,
"close": 40.0058,
"volume": 6950648,
"score": "100",
"symbol": "ZION",
"company_name": "Zions Bancorporation",
"company_sector": "Financial"
},
"3": {
"open": 6.86,
"high": 7.27,
"low": 6.86,
"close": 7.09,
"volume": 1391657,
"score": "100",
"symbol": "ZIOP",
"company_name": "ZIOPHARM Oncology, Inc.",
"company_sector": "Healthcare"
},
"4": {
"open": 5.38,
"high": 5.41,
"low": 5.19,
"close": 5.21,
"volume": 345071,
"score": "100",
"symbol": "ZIXI",
"company_name": "Zix Corporation",
"company_sector": "Technology"
},
"5": {
"open": 1.2,
"high": 1.2,
"low": 1.15,
"close": 1.15,
"volume": 136149,
"score": "100",
"symbol": "ZN",
"company_name": "Zion Oil & Gas, Inc.",
"company_sector": "Basic Materials"
},
"6": {
"open": 2.85,
"high": 2.9,
"low": 2.82,
"close": 2.86,
"volume": 6989286,
"score": "100",
"symbol": "ZNGA",
"company_name": "Zynga, Inc.",
"company_sector": "Technology"
}
}

我已经验证它是 json 格式，并且我有以下模型来表示它：

export interface User {
  open: number;
  high: number;
  low: number;
  close:number;
  volume: number;
  score: string;
  symbol:string;
  company_name:string;
  company_sector:string;

}

json 的服务按预期工作，但是当我尝试在这样的表中显示 json 时：

<font color="white">
<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="symbol">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> 
Symbol </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.symbol}} </mat-cell>
</ng-container>
<ng-container matColumnDef="score">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Score </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.score}} </mat-cell>
</ng-container>
<ng-container matColumnDef="open">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Open </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.open}} </mat-cell>
</ng-container>
<ng-container matColumnDef="high">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> High </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.high}} </mat-cell>
</ng-container>
<ng-container matColumnDef="low">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Low </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.low}} </mat-cell>
</ng-container>
<ng-container matColumnDef="close">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 25.5%"> Close </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.close}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company_name">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Company Name </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.company_name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company_sector">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Company Sector </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.company_sector}} </mat-cell>
</ng-container>
<ng-container matColumnDef="volume">
  <mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Volume </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.volume}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table> 
</div>
</font>

我试图在互联网上将它显示为带有一些指南的表格，但无法成功，它总是显示一个空表格，你知道可能是什么问题吗？

编辑：这是组件的 ts 文件：

import { Component, ViewChild } from '@angular/core';
import { UserService } from '../../services/userservice/user.service';
import { User } from '../../models/user.model';
import { MatTableDataSource, MatSort } from '@angular/material';
import { EasyService } from '../../services/easysearch/easysearch.service';


@Component({
  selector: 'usertable',
  templateUrl: './usertable.component.html',
  styleUrls: ['./usertable.component.css']
})
export class UsertableComponent   {
  userData = null;
  dataSource = new MatTableDataSource(this.userData);
  displayedColumns = ['open','high', 'low', 'close', 'volume', 'score', 
'symbol','company_name', 'company_sector'];



  constructor(private userService: UserService) {
userService.getUser().subscribe(
  data => {
    this.userData = data;
    this.dataSource.data = this.userData;
  });
   }



  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
     this.dataSource.sort = this.sort;
    }



}

/*export class UserDataSource extends DataSource<any> {
  constructor(private userService: UserService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
      }

  @ViewChild(MatSort) sort: MatSort;




  disconnect() {}
}*/

这是服务：

 import { Injectable }   from '@angular/core';
 import { HttpClient }   from '@angular/common/http';
 import { Observable }   from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import { User } from '../../models/user.model';
 @Injectable()
 export class EasyService {
  private serviceUrl = 'http://193.106.55.148:8080/easysearch?budget=1';

  constructor(private http: HttpClient) { }

 getUser(): Observable<User[]> {
   return this.http.get<User[]>(this.serviceUrl);
  }


}
4

1 回答 1

-1

您得到的响应http不是 JSON 数组，而是 JSON 对象。使用Object.values将响应转换为数组。

userService.getUser().subscribe(
      data => {

        this.dataSource.data = Object.values(data);
      });
于 2018-04-30T04:06:06.917 回答