问题描述
我创建了IONIC 4 APP，并且有一个读取这样的json的服务
{
"home": [
{
"internos": 1,
"externos": 2,
"cancelados": 3
}
]
}
我想将这3个值保存到单独的变量中
import { Component, OnInit } from '@angular/core';
import { LoadHomeService } from './load-home.service';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
eventosInternos : number // this should receive: 1
eventosExternos : number // this should receive: 2
eventosCancelados: number // this should receive: 3
constructor(private homeService: LoadHomeService) { }
ngOnInit() {
}
}
我怎样才能做到这一点？
1楼
再想一想， 对象解构在这里也适用。
const yourResponseData = {
"home": [
{
"internos": 1,
"externos": 2,
"cancelados": 3
}
]
};
export interface Home {
internos: number;
externos: number;
cancelados: number;
}
const home: Home[] = yourResponseData.home;
// Object Destructuring
const { internos, externos, cancelados } = <Home>home[0];
2楼
您需要声明一个将接收json的变量（为了演示，我将其称为json_example），然后创建一个将接收键home的项目的变量，但是由于它是列表，因此使用方括号来确定它是“地址”，现在可以访问所需的键。
您将以类似于以下代码的结尾：
var variable = (<any>json_example).home[0];
var internos = variable.internos;
var externos = variable.externos;
var cancelados = variable.cancelados;
3楼
我不认为您的ngOninit应该嵌套在构造函数中，因为那不是它的工作方式。
假设服务上的API调用方法称为getData ，则可以执行以下操作：
export class HomePage implements OnInit {
eventosInternos : number // this should receive: 1
eventosExternos : number // this should receive: 2
eventosCancelados: number // this should receive: 3
constructor(private homeService: LoadHomeService) {
this.loadHomeData();
}
loadHomeData() {
this.homeService.getData().subscribe(response => {
this.eventosInternos = response['home'][0]['internos];
this.eventosExternos = response['home'][0]['externos];
this.eventosCancelados = response['home'][0]['cancelados];
})
}
}