Ionic 4 - Как передать параметр id на другую страницу и получить данные идентификатора из внешнего API

Question

заранее извините за пустышку, но я не могу решить эту проблему. Итак, у меня есть список категорий, который приходит от API узла nodeJS. Я хочу получить подкатегории в соответствии с идентификатором из базы данных. Приложение связывается с API через сервис. На стороне базы данных таблицы «категория» и «подкатегория» связаны через внешний ключ, который находится в таблице «подкатегория». Я знаю, что мой SQL-запрос, который я сделал на API, в порядке, потому что я проверил его на почтальоне. На данный момент проблема в том, что я получаю все подкатегории, а не только те, которые связаны с моими идентификаторами.

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

  }

Спасибо за помощь !!

Answer 1

Не уверен, что понял ваш вопрос. Вы хотите передать идентификатор на другую страницу, а затем использовать этот идентификатор для извлечения подкатегорий из базы данных? Если это так, вы можете сделать что-то вроде этого:

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

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

Конечно, вы должны внести несколько изменений в этот код, но я думаю, что он может указать вам верное направление.