无法从 Angular 中的 JSON 加载数据 2
Not able to load data from JSON in Angular 2
我正在从 JSON 文件中加载数据 Angular 2.
这是我的 JSON 文件:
[
{
"processName": "SOUAD_1",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
},
{
"processName": "SOUAD_2",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
},
{
"processName": "SOUAD_3",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
}
]
这是我的 ts 文件,我在其中指定了 JSON 路径...
import {
Injectable
} from '@angular/core';
import {
Http,
Headers,
RequestOptions,
Response
} from '@angular/http';
import {
Observable,
Subject
} from 'rxjs/Rx';
import 'rxjs/Rx'; //get everything from Rx
import 'rxjs/add/operator/toPromise';
import {
IProduct
} from "../models/iproduct";
@Injectable()
export class ProcessJsonService {
private jsonFileURL: string = "../Data/jsonfile.json";
constructor(private http: Http) {}
//
getProcesslist(): Observable < IProduct[] > {
return this.http.get(this.jsonFileURL)
.map((response: Response) => <IProduct[]>response.json())
.catch(this.handleError);
}
private handleError(errorResponse: Response) {
console.log(errorResponse.statusText);
return Observable.throw(errorResponse.json().error || "Server error");
}
}
这是我的进程列表-component.ts
import { Component, OnInit } from '@angular/core';
import { IProduct } from "../models/iproduct";
import {
Http
} from '@angular/http';
import {
ProcessJsonService
} from '../models/myjsonprocess';
import {
Observable
} from 'rxjs/Rx';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string = '';
processList: IProduct[];
errorMessage: string;
constructor(private _processJsonService: ProcessJsonService) {
this.processList = [];
}
ngOnInit(): void {
let self = this;
self._processJsonService.getProcesslist().subscribe(response => this.processList = response, error => this.errorMessage = < any > error);
}
}
这是我的进程列表组件
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div class='panel-body'>
<div class='row'>
<div class='col-md-2'>Filter by:</div>
<div class='col-md-4'>
<input type='text' [(ngModel)]='listFilter' />
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<h3>Filtered by: {{listFilter}} </h3>
</div>
</div>
<div class='table-responsive'>
<table class='table'
*ngIf='processList && processList.length'>
<thead>
<tr>
<th>Process Name</th>
<th>Process Status</th>
<th>Unprocessed CMSG</th>
<th>Tempacked CMSG</th>
<th>Deferred CMSG</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let process of processList">
<td>{{ process.processName }}</td>
<td>{{ process.processStatus | lowercase }}</td>
<td>{{ process.UnprocessedCMSG }}</td>
<td>{{ process.TempackedCMSG}}</td>
<td>{{ process.DeferredCMSG}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我应该得到一个 table,其中显示了每个进程的详细信息。但是,在浏览器中,我得到的是空白页面,没有显示任何数据。
请帮忙??
这是我在控制台中得到的:
AppComponent.html:7 ERROR Error: StaticInjectorError(AppModule)[ProductListComponent -> ProcessJsonService]:
StaticInjectorError(平台:核心)[ProductListComponent -> ProcessJsonService]:
NullInjectorError:没有 ProcessJsonService 的提供者!
在 _NullInjector.get (core.js:994)
看这段代码:
.subscribe(response => this.processList = response
然后在您的模板中:
*ngFor="let process of processList | async"
您仅使用 async
管道从 Observable/Promise
中检索值。 processList
两者都不是,您已经订阅了数据并将其存储在变量中,因此只需从模板中删除 async
管道即可。
我正在从 JSON 文件中加载数据 Angular 2.
这是我的 JSON 文件:
[
{
"processName": "SOUAD_1",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
},
{
"processName": "SOUAD_2",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
},
{
"processName": "SOUAD_3",
"processStatus": "Hibernating",
"UnprocessedCMSG": 123,
"TempackedCMSG": 10,
"DeferredCMSG": 32.99
}
]
这是我的 ts 文件,我在其中指定了 JSON 路径...
import {
Injectable
} from '@angular/core';
import {
Http,
Headers,
RequestOptions,
Response
} from '@angular/http';
import {
Observable,
Subject
} from 'rxjs/Rx';
import 'rxjs/Rx'; //get everything from Rx
import 'rxjs/add/operator/toPromise';
import {
IProduct
} from "../models/iproduct";
@Injectable()
export class ProcessJsonService {
private jsonFileURL: string = "../Data/jsonfile.json";
constructor(private http: Http) {}
//
getProcesslist(): Observable < IProduct[] > {
return this.http.get(this.jsonFileURL)
.map((response: Response) => <IProduct[]>response.json())
.catch(this.handleError);
}
private handleError(errorResponse: Response) {
console.log(errorResponse.statusText);
return Observable.throw(errorResponse.json().error || "Server error");
}
}
这是我的进程列表-component.ts
import { Component, OnInit } from '@angular/core';
import { IProduct } from "../models/iproduct";
import {
Http
} from '@angular/http';
import {
ProcessJsonService
} from '../models/myjsonprocess';
import {
Observable
} from 'rxjs/Rx';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string = '';
processList: IProduct[];
errorMessage: string;
constructor(private _processJsonService: ProcessJsonService) {
this.processList = [];
}
ngOnInit(): void {
let self = this;
self._processJsonService.getProcesslist().subscribe(response => this.processList = response, error => this.errorMessage = < any > error);
}
}
这是我的进程列表组件
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div class='panel-body'>
<div class='row'>
<div class='col-md-2'>Filter by:</div>
<div class='col-md-4'>
<input type='text' [(ngModel)]='listFilter' />
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<h3>Filtered by: {{listFilter}} </h3>
</div>
</div>
<div class='table-responsive'>
<table class='table'
*ngIf='processList && processList.length'>
<thead>
<tr>
<th>Process Name</th>
<th>Process Status</th>
<th>Unprocessed CMSG</th>
<th>Tempacked CMSG</th>
<th>Deferred CMSG</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let process of processList">
<td>{{ process.processName }}</td>
<td>{{ process.processStatus | lowercase }}</td>
<td>{{ process.UnprocessedCMSG }}</td>
<td>{{ process.TempackedCMSG}}</td>
<td>{{ process.DeferredCMSG}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我应该得到一个 table,其中显示了每个进程的详细信息。但是,在浏览器中,我得到的是空白页面,没有显示任何数据。 请帮忙??
这是我在控制台中得到的:
AppComponent.html:7 ERROR Error: StaticInjectorError(AppModule)[ProductListComponent -> ProcessJsonService]:
StaticInjectorError(平台:核心)[ProductListComponent -> ProcessJsonService]: NullInjectorError:没有 ProcessJsonService 的提供者! 在 _NullInjector.get (core.js:994)
看这段代码:
.subscribe(response => this.processList = response
然后在您的模板中:
*ngFor="let process of processList | async"
您仅使用 async
管道从 Observable/Promise
中检索值。 processList
两者都不是,您已经订阅了数据并将其存储在变量中,因此只需从模板中删除 async
管道即可。