javascript - 无法在 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
    }
]

这是我指定 JSON 路径的 ts 文件...

    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 管道即可。