Ionic Angular Mobile App 在从项目中的文件中获取和显示 json-array 数据时显示错误---

Posted 2023-03-16

【中文标题】Ionic Angular Mobile App 在从项目中的文件中获取和显示 json-array 数据时显示错误---

【英文标题】：Ionic Angular Mobile App showing error while fetching and displaying json-array data from a file within the project ---

【发布时间】：2021-08-27 09:59:36

【问题描述】：

这是一个带有 Angular 的 Ionic 移动应用。相关问题，使用 Ionic Framework 和 Angular TS 作为后端。我对 ionic 应用程序开发完全陌生。

我创建了这个 stackblitz 来模拟我的需求 ---> https://stackblitz.com/edit/ionic-6h9vwa

目标是在分类标签页上绑定和显示来自 cat_data.json 文件[将在 assets/data/ 文件夹中找到] 的分类数据。 我当前遇到的错误，您可以在控制台中看到 -> ERROR 错误：this.catData.loadCategories 不是函数

这行代码在category-list.html页面的后端.ts文件中。 像这样：

ionViewDidEnter()
  
    return this.catData.loadCategories();
  

与问题相关的大部分代码我已尽力安排。 我无法获取和显示数据，即使在尝试了多个 no 之后也是如此。烫发。和梳子。 我需要让这个工作。至少以某种形式显示它，最好是在离子网格和离子行、离子列排列中。希望你能理解。如果这样做了，我至少可以在正确的实现中使用它。

我猜你可以分叉它并工作/修改它或编辑原始闪电战本身。随意。

想要这个工作。

【参考方案1】：

在 app.module.ts 中移除 provide: CategoryData, useClass: HttpClient

替换为

providers: [
      provide: ErrorHandler, useClass: IonicErrorHandler ,
     CategoryData
         ]

它消除了您遇到的错误。

别忘了订阅 observable，在订阅中你通常可以提取 categories.ts 上的数据

ionViewDidEnter()
  
    this.catData.loadCategories().subscribe(p => 
  console.log(p)
);

暂时你得到 []。

在 Stackblitz 上，无法提取（或不那么容易）.json 文件，但在您的 IDE 上是可行的。检查：https://***.com/a/55580172/16027883

在您的服务上添加：

  getJsonData(filePath: string)
return this.http.get(filePath);

并在您的 .ts 中使用它

ionViewDidEnter()
this.catData.getJsonData('./assets/cat_data.json').subscribe(resData => 
  this.data = resData;
  console.log(this.data);

     )

在控制台中，您可以看到：categories: Array(3) 包含所有元素。您需要提取它以在您的 html 中显示它。

最终更新：

在您的页面中 .ts

data: any;
dataShow = [];

  ionViewDidEnter()
this.catData.getJsonData('./assets/cat_data.json').subscribe(resData => 
  this.data = resData;
  this.dataShow = this.data.categories
  

     )

在您的 html 中：

<ion-content >
<ion-grid>
<ion-row>
  <ion-col size-sm="8" offset-sm="2">
    <ion-card *ngFor="let data of dataShow">
      <ion-card-title>data.c_id</ion-card-title>
      <ion-card-subtitle>data.c_name</ion-card-subtitle>
      <ion-card-content>
        data.c_description
      </ion-card-content>
      
      
    </ion-card>
  </ion-col>
</ion-row>
  </ion-grid>

</ion-content>

【讨论】：

不，我不使用外部 URL。该文件仅在我的项目结构中。一个名为 cat_data.json .... 的 json 文件，数据仅在其中，正如您在我的 stackblitz 中看到的那样。 @uKioops 是的，因为它是 atmo，事情并不容易你能告诉我在这种情况下我该怎么做.....因为数据不是来自外部 URL；令人头疼....任何可以使这更容易的替代想法或安排....感谢对来自外部 URL 案例场景的数据的代码块的扩展，

我编辑了我的答案，尝试了一些新的东西

好的，它在这里工作。随着上次更新

嗨@uKioops，让我读完整本书并仔细阅读，我会回来的，

嗨@uKioops，只是问，你是创建了一个新的单独的堆栈闪电战还是只在我的上编辑过，