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

Question

in advance sorry for the dummy question, but I can't resolve this problem. So I have a list of categories that comes from a nodeJS api. I want to retrieve the subcategories according to the id, from the database. Application is communicating with api through a service. On the database side, tables "category" and "subcategory" are related through a foreign key which is in "subcategory" table. I know my sql request I made on the api is ok because I tested it on postman. The problem is for now, I retrieve all the subcategories, and not only those related to my id's.

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));
  }

categoriespage.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;
    })
  }

categoriesdetailpage.html

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

categoriesdetailpage.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;
    })

  }

Thanks for your help !!

Answer 1

Not sure I understood your question. You want to pass an ID to a different page and then use this ID to retrieve the subcategories from the database? If that is the case you cand do something like this:

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)
    );
  }

categoriespage.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);
  }
}

categoriesdetailpage.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);   
      });
    }
  }
}

Of course you have to make a few changes to this code, but I think it can point you into the right direction.