Question

我有JSON对象，我使用HTTP GET动态获取。

我想将它们保存在一个数组中以便稍后循环它们并在浏览器中显示它们。

请问该怎么做？

是否有保存JSON对象从Angular 4中的数组中动态获取？

这是我的模特：

export interface IProduct {
    deferred_cmsg: number;
    unprocessed_cmsg: number;
    tempacked_cmsg: number;
    status: string;
    process_name: string;
    instance: number;   
}

这是我的服务：

import { Injectable } from '@angular/core';  
import {  
    Http,  
    HttpModule,
    Headers,  
    RequestOptions,  
    Response  
} from '@angular/http'; 
import { HttpClientModule } from '@angular/common/http'; 
import { Observable } from 'rxjs/Rx';  
import 'rxjs/Rx'; //get everything from Rx    
import 'rxjs/add/operator/toPromise';  
import { IProduct } from "../models/iproduct"; 
@Injectable()  
export class ProcessJsonService {  
    constructor(private http: Http) {}  

   getProcesslist(): Observable < IProduct[] > {  
        return this.http.request('http://www.json-generator.com/api/json/get/cpMCFgbCeW?indent=0')
        .map(res => { console.log("I SEE DATA HERE: ", res.json())
            return res.json(); })
        }
   }

这是我的组成部分：

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 = 'Process List';
  imageWidth: number = 50;
  imageMargin: number = 2;
  showImage: boolean = false;
  listFilter: string = '';
  processList: IProduct[];  
  errorMessage: string;
  myProcessarray: any[];

  constructor(private _processJsonService: ProcessJsonService) {  
    this.processList = []; 
  }

  ngOnInit(): void {  
        this._processJsonService.getProcesslist()
        .subscribe(processList => {
            if (processList instanceof Array) {
                this.processList = processList;
                console.log("souad", processList);
            } else {
                this.processList = [processList];
                console.log("souad aaa", processList);
            }
        });
          setTimeout(function(){
          location.reload();
        },60000);
  }           
}

这是我的HTML代码：

<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-4'>
        <h4>Filtered by: {{listFilter}} </h4>
      </div>
    </div>
        <div class='table-responsive'>
            <table class='table'
                   *ngIf='processList && processList.length'>
                <thead>
                    <tr>
                        <th>Process Name</th>
                        <th>Process Instance</th>
                        <th>Process Status</th>
                        <th>Temp-acked Messages Number</th>
                        <th>Unprocessed Messages Number</th>
                        <th>Deferred Messages Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let process of processList | processFilter:listFilter" >
                        <td>{{ process.process_name}}</td>
                        <td>{{ process.instance  }}</td>
                        <td>{{ process.status }}</td>
                        <td>{{ process.tempacked_cmsg}}</td>
                           <td>{{ process.unprocessed_cmsg}}</td>
                        <td>{{ process.deferred_cmsg }}</td>  
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

此外，如果在URL（hhttp）中添加了新的json，如何刷新数据。

我在组件中使用了重新加载，但它没有刷新。此外，我在HTML中的ngFor中使用了异步管道，它显示错误。

请对这些问题提供帮助吗？

Answer 1

您的服务中存在问题，您不需要return res.json()。更新如下：

getProcesslist(): Observable < IProduct[] > {
    let url = 'http://www.json-generator.com/api/json/get/cpMCFgbCeW?indent=0';
    return this.http.request(url).map(res => res.json());
}

在组件内部，声明您的变量

processList: IProduct[] = []

ngOnInit(): void {  
    this._processJsonService.getProcesslist()
        .subscribe(processList => {
            this.processList = processList;
        });
}

您的html也存在问题，您需要添加> 0

<table class='table' *ngIf='processList && processList.length > 0'>

以上内容将有效，以便每次加载页面时，它都会获取列表并为您存储。

要定期获取数据，您可以执行以下操作：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from "rxjs";
import { TimerObservable } from "rxjs/observable/TimerObservable";

export class MyComponent implements OnInit, OnDestroy {
    processList: IProduct[] = [];
    private alive: boolean;
    private interval: number

    constructor() {
        this.alive = true;
        this.interval = 10000;
    }

    ngOnInit() {
        TimerObservable.create(0, this.interval)
          .takeWhile(() => this.alive)
          .subscribe(() => {
            this._processJsonService.getProcesslist()
              .subscribe((processList) => {                    
                  this.processList = processList;                                  
              });
        });
    }

    ngOnDestroy(){
        this.alive = false;
    }
}

编辑：

要将每个新的json列表添加到原始列表，您将执行以下操作：

ngOnInit() {
    TimerObservable.create(0, this.interval)
      .takeWhile(() => this.alive)
      .subscribe(() => {
        this._processJsonService.getProcesslist()
          .subscribe((processList) => {
            if (this.processList.length === 0) {
                this.processList = processList;
            } else {
                processList.forEach((item) => { 
                    this.processList.push(item);
                });
            } 
          });
    });
}

这会将每个新的processList添加到原始数组

如何在角度4中声明和循环一个JSON对象数组？

1 个答案: