使用 Ionic/Angular 在 HTML 中打印 Json 数据答案

【问题标题】：Print Json Data in HTML with Ionic/Angular使用 Ionic/Angular 在 HTML 中打印 Json 数据
【发布时间】：2020-05-27 00:34:45
【问题描述】：

我正在使用 IONIC Angular 构建一个应用程序，并尝试以 HTML 格式打印结果。

从 console.log 可以正常工作，但从视图中我无法打印数据

json 接口

{
  "matches1": {
    "homeTeam": "Barcellona",
    "awayTeam": "Real Madrid",
   },
  "matches2": {
    "homeTeam": "PSG",
    "awayTeam": "Lione",
   }
}

home.page.ts

export class HomePage {

  matches1: any;
  homeTeam1: any;
  awayTeam1: any;
  result1: any;

  private apiurl = 'https://myapi.xxx';

  constructor(private httpService: HttpClient) {
    this.getdata();
  }

  getdata() {
    this.httpService.get(this.apiurl).subscribe(res => {
        this.item = res['matches1']['homeTeam'];
        console.log(this.item); <-- this work in console log
    }, (err: HttpErrorResponse) => {
        console.log (err.message);
       }
      );
    }

}

home.page html

  <ion-item *ngFor="let item of items"> 
    {{item.homeTeam}}
  </ion-item>

谢谢！

【问题讨论】：

标签： json angular ionic-framework

【解决方案1】：

您需要在 Controller 中声明 item，如果您的 item 不是列表，则不能使用 ngFor。现在你的 json 没有返回一个数组，所以如果可以的话，最好把它变成一个匹配列表。

如果是这样的话，你的 Json 会更好看：

{
  "matches": [
      {
         "homeTeam": "Barcellona",
         "awayTeam": "Real Madrid",
      },
      {
         "homeTeam": "PSG",
         "awayTeam": "Lione",
      }
  ]
}

通过这种方式，您可以轻松地遍历控制器中的匹配列表

export class HomePage {

  matches1: any;
  homeTeam1: any;
  awayTeam1: any;
  result1: any;
  item: string[]:
  private apiurl = 'https://myapi.xxx';

  constructor(private httpService: HttpClient) {
    this.getdata();
  }

  getdata() {
    this.httpService.get(this.apiurl).subscribe(res => {
        res["matches"].forEach(match => this.item.push(match["homeTeam"]));
    }, (err: HttpErrorResponse) => {
        console.log (err.message);
       }
      );
    }

}

【讨论】：

【解决方案2】：

这应该做的工作：

export class HomePage {

  matches1: any;
  homeTeam1: any;
  awayTeam1: any;
  result1: any;
  items: any;

  private apiurl = 'https://myapi.xxx';

  constructor(private httpService: HttpClient) {
    this.getdata();
  }

  getdata() {
    this.httpService.get(this.apiurl).subscribe(res => {
        this.items = Object.keys(res).map(function(key, index) {
          return res[key];
        });
    }, (err: HttpErrorResponse) => {
        console.log (err.message);
       }
      );
    }

}

【讨论】：

不客气。要将答案标记为已接受，请单击答案旁边的复选标记以将其从灰色切换为已填充。

【解决方案3】：

我喜欢使用 json 管道 (https://angular.io/api/common/JsonPipe)，试试这个：

<pre>{{ items | json }}</pre>

编辑：在您的情况下，它可能是item | json。还有，Hala Madrid！

【讨论】：

感谢您的帮助！但在我看来并没有发生什么。 PS。哈哈哈很棒的团队！