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

Posted 2023-03-16

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

【英文标题】：Can't find differ supporting object '[object Object]' of type 'object'. only supports binding to Iterables while reading & parsing data from JSON file

【发布时间】：2021-08-23 08:29:44

【问题描述】：

他的问题与 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()。还有更多...

期待中的交易

【问题讨论】：

this.http.get 返回一个对象。你很难理解你的问题的原因是因为你把任何地方都放了。换成实际类型，你就会明白

具体在哪里？？ @misha130

【参考方案1】：

乍一看，您的类别看起来像是一个数组。所以代码应该定义一个 array 任意：any[]。

类似这样的：

export class CategoryListPage


  categories: any[];

  constructor(public catData: CategoryData) 

  

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

      this.categories = categories;

    );
  

一个数组会按照您的错误消息的定义使其“可迭代”。

【讨论】：

嗨@DeborahK 我根据建议编辑了类别列表页面的代码隐藏。我现在有，类别：any[]=[];作为类级别的变量。但是我不能使用， catData.getCategories 它给出了错误 --> 预期的 0 类型参数但得到了 1。这是因为 getCategories() 方法只返回 loadCategories() ..... 希望你明白, case-scenario 是如何...所有的问题都在这一行 --> this.data.forEach((category: Category) => of the processData() of the category-data.ts service .. .

我创建了这个 stackblitz ---> stackblitz.com/edit/ionic-6h9vwa 目前它显示找不到包 rxJS [虽然它在那里] 如果有人可以让这个运行并绑定并显示数据类别标签页，这对我来说就足够了。那就够了！ @deborahk

我没用过离子。它需要Angular v5吗？ （Angular 目前在 v12 上）此外，它似乎正在尝试安装 RxJS 7。AFAIK，RxJS 7 尚未与 Angular v12 兼容（并且绝对与 Angular v5 不兼容）。

而且上面的代码有错误。 getCategories 后面不应有通用参数。我在上面更正了。

另一种选择，如果问题不在于代码的 ionic 部分，请创建一个默认的 Angular stackblitz 并将有问题的代码与示例 UI 一起放入其中以查看结果（或只是一个控制台。日志（）。

【参考方案2】：

问题是您没有指定对象类型。首先根据你的 json 返回结果创建一个数据模型，并使用该数据对象类型而不是任何类型。

例子：-

export class category
    c_id: string;
    c_name: string ;
    c_description: string[];
    icon: string;
    profilePic: string


data: category[];

processData(data) 

    this.data = data;

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

    );

    return this.data;
    

【讨论】：

@hash-dew 我最初使用'any'，因为它是一种动态类型，可以让我的工作更轻松。顺便说一句，我试过你的东西。现在我的代码有 2 个错误，这一行 --> this.data.categories.forEach((category: any) 类型 Category[] 上不存在属性类别。作为替代，我直接尝试了 this.data.forEach(.. .....因为我的 c_data.json 毕竟只有 1 个数组。它给了我错误 ---> this.data.forEach 不是函数

你能在stackblitz中分享你的代码吗？所以我可以看看，让你知道该怎么做。可能模型与您的数据不匹配。

好的，会尝试这样做@hash-dew 会通知

看看这个 --> stackblitz.com/edit/ionic-kjal1e@hash-dew 你可能需要在那里做一些整理（TS 文件中引用的依赖项和路径）我很抱歉；不习惯为 ionic 创建 stackblitzes。但是我在主要项目中的全部内容也都在那里，希望您理解，让我知道您需要仔细查看的任何部分的解释或详细信息；将提供

目前它在 stackblitz 中显示“安装包 rxJs”，@hash-dew