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（Platform：core）[ProductListComponent - ＆gt; ProcessJsonService]： NullInjectorError：没有ProcessJsonService的提供者！ at _NullInjector.get（core.js：994）

Answer 1

看看这段代码：

*ngFor="let process of processList | async"

然后在你的模板中：

async

您只能使用Observable/Promise管道从processList中检索值。 async不属于他们，您已经订阅了数据并将其存储在变量中，因此只需从模板中删除import Route from '@ember/routing/route'; export default Route.extend({ model() { let dateFrom = this.paramsFor('dashboard').dateFrom let dateTo = this.paramsFor('dashboard').dateTo let hash = {dateFrom, dateTo} return Ember.RSVP.hash({ custakelist: this.get('store').query('custakelist', hash), barchart: this.get('store').query('barchart', hash), }); }, setupController(controller, models) { this._super(controller, models); controller.set('barchart', models.barchart); controller.set('custakelist', models.custakelist); },管道即可。

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

1 个答案: