java脚本和ionic的对象对象错误

Question

我用covid19实时数据创建了一个移动应用程序。我使用过api.但是我无法从中访问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。这里的pi连接是我运行应用程序successfly.final successful输出的事件。

Answer 1

要在html中显示数据，需要对数据进行字符串化，因此应该在html中使用数据而不是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>