Javascript 无法从Angular 2中的JSON加载数据

我正在从Angular 2中的JSON文件加载数据

这是我的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");  
    }  
}  

import{
注射的
}从“@angular/core”开始；
导入{
Http,，
标题，
请求选项，
回应
}来自“@angular/http”；
导入{
可见的，
主题
}来自“rxjs/Rx”；
进口“rxjs/Rx”//从Rx获得一切
导入“rxjs/add/operator/toPromise”；
导入{
i产品
}来自“./models/iproduct”；
@可注射（）
导出类ProcessJsonService{
私有jsonFileURL:string=“../Data/jsonfile.json”；
构造函数（私有http:http）{}
//    
getProcesslist（）：可观察的{
返回this.http.get（this.jsonFileURL）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）；
}  
私有句柄错误（errorResponse:Response）{
console.log（errorResponse.statusText）；
返回Observable.throw（errorResponse.json（）.error | |“服务器错误”）；
}  
}  

这是我的my process-list-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);  
    }  
}

从'@angular/core'导入{Component，OnInit}；
从“./models/ipproduct”导入{ipproduct}；
导入{
Http
}来自“@angular/http”；
导入{
ProcessJsonService
}来自“../models/myjsonprocess”；
导入{
可观察
}来自“rxjs/Rx”；
@组成部分({
选择器：'应用程序产品列表'，
templateUrl:'./product list.component.html'，
样式URL:['./product list.component.css']
})
导出类ProductListComponent实现OnInit{
pageTitle:字符串='产品列表'；
图像宽度：数字=50；
imageMargin：数字=2；
showImage:boolean=false；
listFilter:string=''；
processList:IPProduct[]；
错误消息：字符串；
构造函数（私有_processJsonService:processJsonService）{
this.processList=[]；
}
ngOnInit（）：void{
让自我=这个；
self.\u processJsonService.getProcesslist（）.subscribe（response=>this.processList=response，error=>this.errorMessage=error）；
}  
}

这是我的进程列表组件

{{pageTitle}}
筛选依据：
筛选人：{{listFilter}
进程名称
进程状态
未处理的CMSG
临时性CMSG
延迟的CMSG
{{process.processName}
{{process.processStatus}小写}
{{process.UnprocessedCMSG}}
{{process.TempackedCMSG}}
{{process.DeferredCMSG}}

看看这个代码：

.subscribe(response => this.processList = response

然后在模板中：

*ngFor="let process of processList | async"

---

您只能使用

async

管道从

可观察/承诺

中检索值

processList

两者都不是，您已经订阅了数据并将其存储在变量中，因此只需从模板中删除

async

管道。

我删除了async管道，但仍然没有在浏览器中显示数据。我通过删除异步管道更新了这个问题。我打赌您的

jsonFileURL

不是有效的URL…它是我的json文件的路径，位于数据文件夹中的app下。我尝试了一个来自web的json测试URL，但也没有成功