1

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

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

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

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

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

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

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

想要这个工作。

4

1 回答 1

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 ://stackoverflow.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>
于 2021-06-10T13:04:35.940 回答