javascript - java脚本和离子的对象对象错误
问题描述
我使用 covid19 实时数据创建了一个移动应用程序。我使用过 api.but 我无法从中访问 json 数据。当它运行对象对象错误时显示。这是当前输出 ,这里是 api 中的数据。这是 api 数据。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoadingController } from '@ionic/angular';
import { finalize } from 'rxjs/operators';
import { NULL_EXPR } from '@angular/compiler/src/output/output_ast';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
data : string;
error: string;
loading: any;
obj: string;
updatedDateSL: string;
constructor(private http: HttpClient,public loadingController: LoadingController) {
this.data='';
this.error='';
this.obj='';
this.updatedDateSL='';
}
async ionViewWillEnter() {
await this.presentLoading();
// Load the data
this.prepareDataRequest()
.pipe(
finalize(async () => {
// Hide the loading spinner on success or error
await this.loading.dismiss();
})
)
.subscribe(
data=> { //data is a java script object that is why it can stringfy.
//updatedDateSL = data.data.update_date_time; // Set the data to display in the template
this.data = JSON.stringify(data); //converts to string
this.obj=JSON.parse(this.data); //info is a javascript objct
//var totCasesSL = info.data.local_total_cases;
//var totHospitalSL = data.local_total_number_of_individuals_in_hospitals;
//var totRecoverSL = data.local_recovered;
//var totDeathSL = data.local_deaths;
//var newSL = data.local_new_cases;
//var newDeathSL = data.local_new_deaths;
//var totActiveSL = data.local_active_cases;
//alert(info.update_date_time);
},
err => {
// Set the error information to display in the template
this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
}
);
}
async presentLoading() {
// Prepare a loading controller
this.loading = await this.loadingController.create({
message: 'Loading...'
});
// Present the loading controller
await this.loading.present();
}
private prepareDataRequest(): Observable<object> {
// Define the data URL
//const dataUrl = 'https://api.nigelbpeck.com/';
const dataUrl = 'https://hpb.health.gov.lk/api/get-current-statistical/';
// Prepare the request
return this.http.get(dataUrl);
}
}
这是html文件。
/<ion-header>
<ion-toolbar>
<ion-title>
Ionic 4 Example App
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding">
<p>Data will be presented here...</p>
<p *ngIf="!error;else errorContent">{{ obj ? obj : '-' }}</p>
<ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
</div>
</ion-content>
我需要获取 local_new_cases 和 local_total_cases.Api 连接在这里工作是我成功运行应用程序的事件。最终成功输出。
解决方案
要在 html 中显示数据,您需要对数据进行字符串化,因此您应该在 html 中使用 data 而不是 obj 。更新 html 代码
<ion-content>
<div class="ion-padding">
<p>Data will be presented here...</p>
<p *ngIf="!error;else errorContent">{{ obj ? obj : '-' }}</p>
<ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
</div>
</ion-content>
至
<ion-content>
<div class="ion-padding">
<p>Data will be presented here...</p>
<p *ngIf="!error;else errorContent">{{ data ? data : '-' }}</p>
<ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
</div>
</ion-content>
推荐阅读
- java - 监听器内部的变量不会改变
- airflow - 气流 log_format 使用 logging_mixin.py 作为源文件而不是真正的源文件
- c++ - 如果我向这样的向量提供输入,这有什么问题?
- python - leetcode 中的斐波那契
- python - 如何计算熊猫列表中每个字符串的唯一计数?
- python - Django 表单 - 具有数字范围的 ChoiceField
- python - 扩展节点。在这种情况下它是如何工作的?
- reactjs - 如何通过 pnpx 安装旧版本的 create-react-app?
- node.js - 我正在尝试使用 node-html-pdf npm 包将 HTML 转换为 pdf。问题是pdf没有解释数学符号
- android - android coordinator layout怎么用?