使用Ionic/Angular以HTML格式打印Json数据

我正在用IONIC Angular构建一个应用程序，并试图用HTML打印结果

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

json api

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

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

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);
       }
      );
    }

}

导出类主页{
匹配1：任何；
家庭小组1：任何；
awayTeam1：任何；
结果1：有；
私人apiurl服务器https://myapi.xxx';
构造函数（私有httpService:HttpClient）{
这是getdata（）；
}
getdata（）{
this.httpService.get（this.apiurl）.subscribe（res=>{
this.item=res['matches1']['homeTeam']；
console.log（此.item）{
console.log（错误消息）；
}
);
}
}

主页html

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

{{item.homeTeam}}

---

谢谢！

我喜欢使用json管道（），请尝试以下方法：

{{items | json}

编辑：

---

在您的情况下，它可能是

item | json

。另外，Hala Madrid！

这应该可以完成以下工作：

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

---

}

您需要在控制器中声明项目，如果项目不是列表，则不能使用ngFor。现在您的json没有返回数组，所以如果可以，最好将其放入匹配列表中

如果您的Json是这样的，那么它看起来会更好：

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);
       }
      );
    }

}

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

---

谢谢你的帮助！但在我看来并不是什么都没发生。PS.哈哈哈，伟大的团队！不客气。要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰显切换为已填写。

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);
       }
      );
    }

}