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

當然，您必須對此代碼進行一些更改，但我認為它可以為您指明正確的方向。