json - JSON数据未在IONIC和ANJULAR中首次获取
问题描述
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';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
data2 : string;
error: string;
loading: any;
obj: string;
updatedDateSL: string;
TotSL: string;
TotSL2: string;
TotSL3: string;
TotSL5: string;
TotSL4: string;
constructor(private http: HttpClient,public loadingController: LoadingController) {
this.data2='';
this.error='';
this.obj='';
this.TotSL='';
this.TotSL2='';
this.TotSL3='';
this.TotSL4='';
this.TotSL5='';
}
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(
data2=> {
console.log(data2)
this.TotSL3= JSON.stringify(data2.data.update_date_time);
this.TotSL= JSON.stringify(data2.data.local_new_cases);
this.TotSL2= JSON.stringify(data2.data.local_total_cases);
this.TotSL4= JSON.stringify(data2.data.local_deaths);
this.TotSL5= JSON.stringify(data2.data.local_new_deaths);
// Set the data to display in the template
},
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://hpb.health.gov.lk/api/get-current-statistical/';
// Prepare the request
return this.http.get(dataUrl);
}
doRefresh(event) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
}
当我第一次运行此代码时,在 vs 代码中显示“属性‘数据’不存在于类型‘对象’.ts(2339)”中时出现问题,当我使用 ionic serve 编译它时,它在网络浏览器中没有显示任何内容,[ ]但是在我修改了这个代码并将它保存在这个代码中之后,它开始工作并从 api.in 终端获取数据,它说“成功编译”所以如何解决这个问题。.但是我的vs代码编辑器中仍然存在红线。 .
这是一个在我国获取 COVID19 实时数据的移动应用程序。
解决方案
您是否在终端中看到任何编译时错误?
要解决您的数据问题,您可以将其转换为任何数据。
.subscribe((data2:any)=>{...}
data2:any将解决您在屏幕截图中可见的问题。
推荐阅读
- lme4 - 随机结构如何影响固定效应的结果?
- php - php命令指向Ubuntu中不同版本的php
- node.js - 当对 localhost 节点应用程序的多个请求时,Google Chrome 将请求一一排队
- lua - 如何分别返回多个表
- java - 如何将多部分文件从android发送到rest web service(Spring)?
- python-twitter - 我正在使用 twitter API 并收到错误:TwitterError: [{u'message': u'Invalid or expired token.', u'code': 89}]
- entity-framework - 如何在 Web api 控制器类中为 dbset 对象使用依赖注入
- jquery - JQuery DataTables 未在 ASP.NET MVC 中显示数据
- ruby - 使用 Nokogiri 阅读文档时如何处理 ssl / force ssl_version?
- r - 如何计算第二列中逗号分隔的总和