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

Question

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

分类详情页。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;
    })

  }

谢谢你的帮助 ！！

Answer 1

不确定我是否理解你的问题。 您想将 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);   
      });
    }
  }
}

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