Ionic+Angular中*ngFor卡片跳转详情页的详情数据获取问题

我来帮你搞定这个问题！其实你已经走对了大半——通过routerLink把imdbID传到详情页是正确的思路，接下来只需要在详情页拿到这个ID，再去请求对应的详情数据就行。下面一步步给你拆解：

1. 先确认路由配置是否正确 #

你用了[routerLink]="['/', 'main', item.imdbID]"，意味着你的路由需要支持带imdbID参数的路径。打开app-routing.module.ts，给详情页添加带参数的路由配置：

const routes: Routes = [
  // 保留你现有的其他路由
  {
    path: 'main/:imdbID', // 这里的`:imdbID`就是动态参数，和你routerLink里的item.imdbID对应
    // 如果详情页是懒加载模块，用下面的配置：
    loadChildren: () => import('./pages/drink-detail/drink-detail.module').then(m => m.DrinkDetailPageModule)
    // 如果是直接挂载组件，改成：component: DrinkDetailPage
  }
];

2. 在详情页组件中获取路由参数并请求详情 #

假设你的详情页组件叫DrinkDetailPage，在它的.ts文件里，用ActivatedRoute获取路由参数，再用HttpClient请求详情接口：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-drink-detail',
  templateUrl: './drink-detail.page.html',
  styleUrls: ['./drink-detail.page.scss'],
})
export class DrinkDetailPage implements OnInit {
  drinkDetail: any; // 用来存储详情数据

  constructor(
    private http: HttpClient,
    private activatedRoute: ActivatedRoute // 这个服务专门用来获取路由参数
  ) { }

  ngOnInit() {
    // 从路由快照中获取imdbID参数
    const imdbID = this.activatedRoute.snapshot.paramMap.get('imdbID');
    
    // 调用后端详情接口，这里假设你的接口是/getDrinkDetail，接收id参数
    this.http.get(`http://192.168.1.88/Main/getDrinkDetail?id=${imdbID}`)
      .subscribe((response: any) => {
        this.drinkDetail = response;
        // 请求成功后，数据就存在drinkDetail里了
      }, (error) => {
        // 可以加个错误处理，比如打印错误或者提示用户
        console.error('获取详情失败:', error);
      });
  }
}

3. 优化主页面的请求方式（可选但推荐） #

你现在主页面用了原生fetch，其实换成Angular的HttpClient更符合框架规范，也能利用RxJS的特性：

ngOnInit() {
  this.http.get('http://192.168.1.88/Main/getDrinks')
    .subscribe((json: any) => {
      this.data = json;
    });
}

4. 在详情页模板中展示数据 #

拿到drinkDetail后，就可以在详情页的HTML里渲染内容了：

<ion-card>
  <img [src]="drinkDetail?.img_dir" alt="饮品图片">
  <ion-card-header>
    <ion-card-title style="font-weight: bold;">{{drinkDetail?.cname}}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    {{drinkDetail?.description}}
  </ion-card-content>
</ion-card>

这里用了?.可选链操作符，避免数据还没加载完成时出现报错。

额外提醒 #

• 确保你的后端有对应的详情接口，能根据imdbID返回单条饮品的数据
• 如果需要支持从多个地方跳转到详情页（比如用户刷新页面），可以用activatedRoute.paramMap.subscribe()监听参数变化，而不是只在ngOnInit里获取一次
• 可以给请求加个加载状态，提升用户体验

内容的提问来源于stack exchange，提问作者Georgiana Luntraru