JSON数据未在IONIC和ANGULAR中首次获取

Question

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 实时数据的移动应用程序。

Answer 1

您是否在终端中看到任何编译时错误？

要解决您的数据问题，您可以将其转换为任何数据。

.subscribe((data2:any)=>{...}

data2:any 将解决您在屏幕截图中可见的问题。