如何在angular 4中声明和循环JSON对象的数组？
如何在angular 4中声明和循环JSON对象的数组？
提问于 2018-01-26 18:33:03
我有使用HTTP GET动态获取的JSON对象。
我想将它们保存在一个数组中，以便以后循环它们，并在浏览器中显示它们。
请问如何做到这一点？
有没有办法将从URL动态获取的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，如何刷新数据。
我在组件中使用了reload，但它没有被刷新。此外，我在html的ngFor中使用了异步管道，它显示了错误。
请在这些问题上提供帮助?？
回答 1
Stack Overflow用户
发布于 2018-01-26 18:46:56
您的服务内部存在问题，您不需要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添加到原始数组
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48459630
复制相关文章
相似问题
腾讯云开发者
