Ionic5本地JSON数据控制台正常但HTML页面无法渲染如何解决

报错已经明确提示*ngFor只能绑定数组等可迭代对象，你目前给cats赋值的是接口返回的整个外层对象，而真正的猫咪数据数组在该对象的animals属性下，所以*ngFor无法遍历对象，导致渲染失败。

只需要修改home.page.ts中的赋值逻辑，同时优化几个细节即可：

1. 给cats变量初始化空数组，避免页面初始加载时因变量为undefined产生额外报错
2. 将接口返回的animals数组赋值给cats，而不是整个返回对象
3. 建议将数据请求逻辑放到ngOnInit生命周期钩子中，更符合Angular开发规范
4. HTML中图片资源建议使用属性绑定写法，更安全规范

修改后的home.page.ts代码 #

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  // 初始化为空数组
  cats:any = [];
  constructor(public http:HttpClient) {}

  ngOnInit() {
    this.loadData();
  }

  loadData(){
    let data:Observable<any>
    data = this.http.get('assets/backend/db.json');
    data.subscribe(result => {
      // 取animals属性的数组赋值
      this.cats = result.animals;
      console.log(this.cats);
    },
    (err) => {
      alert('failed loading json data');
   });
  }
}

优化后的home.page.html代码（可选） #

<ion-item *ngFor="let cat of cats">
   <ion-card>
      <ion-card-header>
         <ion-card-title>Name: {{cat.AltName}}</ion-card-title>
         <ion-card-subtitle>Origin: {{cat.Origin}}</ion-card-subtitle>
         <ion-card-subtitle>Average LifeSpan: {{cat.Averagelife}}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
         <!-- 用属性绑定写法替代插值 -->
         <img [src]="cat.url" alt="">
         Breed Description: {{cat.BreedDesc}}
      </ion-card-content>
   </ion-card>
</ion-item>

内容的提问来源于stack exchange，提问作者Aatifa Khan