У меня есть следующий 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);
}
}