無法在Angular 2中從JSON加載數據

Question

我正在從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");  
    }  
}  

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

這是我的流程列表組件

  <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> 

我應該得到一張表，其中顯示了每個過程的詳細信息。 但是，在瀏覽器中，我的頁面空了，沒有數據顯示。 請幫忙嗎??

這是我在控制台中得到的：

AppComponent.html:7 ERROR Error: StaticInjectorError(AppModule)[ProductListComponent -> ProcessJsonService]: 

StaticInjectorError（平台：核心）[ProductListComponent-> ProcessJsonService]：NullInjectorError：沒有ProcessJsonService提供程序！ 在_NullInjector.get（core.js：994）

Answer 1

看下面的代碼：

.subscribe(response => this.processList = response

然后在您的模板中：

*ngFor="let process of processList | async"

您僅使用async管道從Observable/Promise檢索值。 processList都不是，您已經預訂了數據並將其存儲在變量中，因此只需從模板中刪除async管道即可。