时间戳

首页 > 解决方案 > Ionic 4 - 如何将 id 参数传递到另一个页面并从外部 api 检索 id 的数据

angular - Ionic 4 - 如何将 id 参数传递到另一个页面并从外部 api 检索 id 的数据

问题描述

提前抱歉这个虚拟问题，但我无法解决这个问题。所以我有一个来自 nodeJS api 的类别列表。我想根据 id 从数据库中检索子类别。应用程序正在通过服务与 api 通信。在数据库方面，表“类别”和“子类别”通过“子类别”表中的外键关联。我知道我在 api 上提出的 sql 请求是可以的，因为我在邮递员上对其进行了测试。现在的问题是，我检索了所有子类别，而不仅仅是那些与我的 id 相关的子类别。

api.service.ts

  getDataCategories(): Observable<any> {
    return this.http.get(categoriesUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }

  getDataSubCategories(): Observable<any> {
    return this.http.get(subCategoriesUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }

分类页面.ts

export class CategoriesPage implements OnInit {

  categories: any=[];
  id:any;

  constructor(public api: ApiService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.api.getDataCategories().subscribe(res=>{
      this.categories= Object.values(res);
      console.log(this.categories);
      return this.categories;
    })
  }

分类detailpage.html

<ion-col size="6">
      <ion-list *ngFor="let data of subCategories[0]">
        <ion-item>{{ data.name }}</ion-item>
      </ion-list>
    </ion-col>

分类详情页.ts

export class CategoryDetailPage implements OnInit {

  categoriesdetails:any=[];

  constructor(public api: ApiService, private route: ActivatedRoute) { }

  ngOnInit() {

    this.api.getDataSubCategories().subscribe(res=>{
      this.categoriesdetails= Object.values(res);
      console.log(this.categoriesdetails);
      return this.categoriesdetails;
    })

  }

谢谢你的帮助 ！！

标签： angulardatabaseionic-frameworkrouting

解决方案

不确定我是否理解你的问题。您想将 ID 传递到不同的页面，然后使用此 ID 从数据库中检索子类别？如果是这种情况，您可以执行以下操作：

api.service.ts：

  getDataCategories(): Observable<any> {
    return this.http.get(categoriesUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

  getDataSubCategories(id: string): Observable<any> {
    return this.http.get(subCategoriesUrl + "?id_subcategory=" + id, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

类别页面.ts：

import { NavigationExtras } from '@angular/router';
import { NavController } from '@ionic/angular';

export class CategoriesPage implements OnInit {

  categories: any=[];
  id:any;

  constructor(public api: ApiService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.api.getDataCategories().subscribe(res=>{
      this.categories= Object.values(res);
      console.log(this.categories);
      return this.categories;
    });
  }

  onSelectedCategory(id: any) {
    let extras: NavigationExtras = {
      state: {
        id_category: id
      }
    };
    this.navController.navigateForward('/categorie-detail-page', extras);
  }
}

类别detailpage.ts：

import { Router } from '@angular/router';

export class CategoryDetailPage implements OnInit {

  categoriesdetails:any=[];

  constructor(private router: Router, public api: ApiService, private route: ActivatedRoute) {
    this.state = this.router.getCurrentNavigation().extras.state;
    if (this.state != undefined) {
      this.api.getSubcategories(this.state['id_category']).subscribe(res => {
        this.categoriesdetails= Object.values(res);
        console.log(this.categoriesdetails);   
      });
    }
  }
}

当然，您必须对此代码进行一些更改，但我认为它可以为您指明正确的方向。

推荐阅读