json - 找不到“object”类型的不同支持对象“[object Object]”。仅支持在从 JSON 文件读取和解析数据时绑定到 Iterables

问题描述

他的问题与 Ionic Angular 有关。根据我的需要适当地读取解析和显示数据。

我有一个 cdata.json 文件，我正在通过服务类文件读取数据并将其传递到要显示的前端 html 文件：

c_data.json

    {
    "categories": [
    {
        "c_id": "C01",
        "c_name": "Medical Supplies[non-prescription]",
        "c_description": "Medical supplies needed during general cases of illness, like 
        diahorrea, head-ache, weakness & fatigue, sleeplessness, heat-rashes, allergies etc.",
        "icon": "pill",
        "profilePic": ""
    },
    {
        "c_id": "C02",
        "c_name": "Medical Supplies[prescription]",
        "c_description": "Medical supplies needed during more complicated cases of chronic 
        illnesses that require doctors supervision, prescription and prescribed medicine. You 
        would be required to upload necessary documents to either file a requirement or 
        request the same from another member.",
        "icon": "pill",
        "profilePic": ""
    },
    ..... ..
    .... .
    ...
    .

    ]}

可注入服务类文件：

    export class CategoryData {

    data: any;

    constructor(public http: HttpClient)
    {

    }

    loadCategories(): any
    {
         if (this.data)
         {
              return of(this.data);
         } 
         else 
         {
              return this.http.get('assets/data/cat_data.json')
              .pipe(map(this.processData, this));
         }
    }

    processData(data: any) {

    this.data = data;

    // loop through each day in the schedule
    this.data.categories.forEach((category: any) => {
    if (category)
    {
        console.log('Fetched');
    }
    else
    {
       console.log('Incapable to fetch category data');
    }

    });

    return this.data;
    }

    getCategories()
    {
       return this.loadCategories();
    }
    }

我试图绑定的html的标记：

<ion-grid fixed>
    <ion-row>
      <ion-col size="12" size-md="6" *ngFor="let cat of categories">
        <ion-card class="category-card">
          <ion-card-header>
            <ion-item detail="false" lines="none" class="category-item" routerLink="/app/tabs/categories/category-details/{{cat.id}}">
              <ion-avatar slot="start">
                <img [src]="cat.profilePic" [alt]="cat.name + ' profile picture'">
              </ion-avatar>
              <ion-label>
                <h2>{{cat.name}}</h2>
                <p>{{cat.title}}</p>
              </ion-label>
            </ion-item>
          </ion-card-header>

          <ion-card-content>

            <ion-list lines="none">

              <ion-item detail="false" routerLink="/app/tabs/categories/category-details/{{cat.c_id}}">
                <ion-label>
                  <h3>About {{cat.c_name}}</h3>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

相应的打字稿：

export class CategoryListPage
{

  categories: any;

  constructor(public catData: CategoryData) {

  }

  ionViewDidEnter()
  {
    this.catData.getCategories().subscribe((categories: any) => {

      this.categories = categories;

    });
  }

}

控制台中的错误消息：

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。在 NgForOf.ngDoCheck (common.js:4841) 在 checkAndUpdateDirectiveInline (core.js:31913)

如果我检查，则可以很好地获取类别数据。{categories : Array(9)} 当你展开它时，数据就在那里。那么这里有什么问题。这不是可迭代的吗？什么意思？

作为替代，我尝试过：

在服务类：

cdata:any[];
{

  .....
  ....
  
  
  ..
  .
  ...
  .

  processData(data: any):Observable<any> {

    this.data = data;

    // loop through each day in the schedule
    this.data.categories.forEach((category: any) => {
      if (category)
      {
        console.log('Fetched');
        this.cdata.push(category);
      }
      else
      {
        console.log('Incapable to fetch category data');
      }

    });

    return this.data;
  }

  getCategories()
  {
    return this.loadCategories();
  }
}

在 html 标记的 .ts 文件中：

export class CategoryListPage
{

  categories: any[];

  constructor(public catData: CategoryData) {

  }

  ionViewDidEnter()
  {
    this.catData.getCategories().subscribe((categories: any) => {

      this.categories = categories;

    });
  }

}

这会引发错误。像，无法实现未定义的方法 .push()。还有很多...

期待中的Tx

标签： jsonangularionic-frameworkdomionic4

export class CategoryListPage { categories: any[]; constructor(public catData: CategoryData) { } ionViewDidEnter() { this.catData.getCategories().subscribe((categories: any[]) => { this.categories = categories; }); } }

json - 找不到“object”类型的不同支持对象“[object Object]”。仅支持在从 JSON 文件读取和解析数据时绑定到 Iterables

问题描述

解决方案

推荐阅读