从服务[Ionic 4]以html格式呈现JSON [英] Render JSON in html from Service [Ionic 4]

问题描述

感谢parrycima，我创建了我的第一个服务.

Thanks to parrycima, I created my first service.

results.service.ts

results.service.ts

  constructor(private httpService: HttpClient) {

  }

  async checkFunc() {

    this.apiurl = 'https://my.apiurl.com/';

    this.httpService.get(this.apiurl).subscribe(res => {

         if (res) {
          this.items = Object.keys(res).map(function(key) {
           return res[key];
          });
         }

        }, (err: HttpErrorResponse) => {
         console.log (err.message);
        }
      );

  }

app.component.ts

app.component.ts

export class AppComponent {

    constructor(
        public myService: ResultsService,
        private httpService: HttpClient
      ) {

       this.myService.checkFunc();

    }

app.component.html

app.component.html

<ion-content>
  <ion-list *ngFor="let item of items">
    <ion-item>{{item.operator}} 
      <div class="icon-status" slot="end">
        <ion-icon name="{{item.status}}"></ion-icon>
      </div>
  </ion-item>
</ion-list>
</ion-content>

我只能在控制台模式下获取对象，而不能在呈现的HTML中获取对象.

I can get object only in console mode, but not in HTML rendered.

https://i.stack.imgur.com/yD3mA.jpg

使用相同的功能，我可以在result.page.ts中很好地呈现HTML.

With the same function I can rendering HTML fine in result.page.ts.

推荐答案

从您的服务返回this.items

From your service return this.items

async checkFunc() {

this.apiurl = 'https://my.apiurl.com/';

await this.httpService.get(this.apiurl).subscribe(res => {

     if (res) {
      this.items = Object.keys(res).map(function(key) {
       return res[key];
      });
      return this.items
     }

    }, (err: HttpErrorResponse) => {
     console.log (err.message);
    }
  );

}


export class AppComponent {
   items;
    constructor(
      public myService: ResultsService,
      private httpService: HttpClient
     ) {

   this.items = this.myService.checkFunc();

 }

这篇关于从服务[Ionic 4]以html格式呈现JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！