Ionic项目嵌套数组（newsItems/eventItems）数据获取问题求助

嘿，刚上手Ionic就能推进到这步已经超棒啦！针对你说的提取嵌套数组（newsItems和eventItems）的问题，我给你捋几个实用的解决思路，应该能帮你搞定～

假设你的城市数据大概是这样的：

const cityData = [
  {
    name: "北京",
    newsItems: [
      { id: 1, title: "北京最新民生政策" },
      { id: 2, title: "秋季文旅打卡指南" }
    ],
    eventItems: [
      { id: 1, name: "国际科技峰会", time: "2024-10-15" }
    ]
  },
  // 更多城市数据...
];

首页只展示城市名称，但点击跳转时，要把整个城市对象（包含嵌套的newsItems和eventItems）传给子页面，而不是只传name字段。

首页模板写法： #

<ion-grid>
  <ion-row>
    <ion-col size="6" *ngFor="let city of cityData">
      <ion-card (click)="openCityDetail(city)">
        <ion-card-content>{{ city.name }}</ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

首页TS文件跳转逻辑： #

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

openCityDetail(city: any) {
  // 用NavController跳转，把完整城市对象存在state里
  this.navCtrl.navigateForward(['/city-detail'], {
    state: { targetCity: city }
  });
}

在子页面的TS文件里，拿到传递过来的城市对象，就能直接提取里面的newsItems和eventItems了：

import { ActivatedRoute } from '@angular/router';

targetCity: any;
cityNews: any[] = [];
cityEvents: any[] = [];

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 获取路由携带的状态数据
  this.targetCity = history.state.targetCity;
  
  // 提取嵌套数组，加个空值判断避免报错
  if (this.targetCity) {
    this.cityNews = this.targetCity.newsItems || [];
    this.cityEvents = this.targetCity.eventItems || [];
  }
}

最后在子页面的模板里，就可以正常遍历这两个嵌套数组了：

<ion-header>
  <ion-toolbar>
    <ion-title>{{ targetCity.name }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 本地新闻区块 -->
  <ion-card>
    <ion-card-header>
      <ion-card-title>本地新闻</ion-card-title>
    </ion-card-header>
    <ion-list>
      <ion-item *ngFor="let news of cityNews">
        <ion-label>{{ news.title }}</ion-label>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 近期活动区块 -->
  <ion-card class="ion-margin-top">
    <ion-card-header>
      <ion-card-title>近期活动</ion-card-title>
    </ion-card-header>
    <ion-list>
      <ion-item *ngFor="let event of cityEvents">
        <ion-label>{{ event.name }} - {{ event.time }}</ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

• 一定要传递完整的城市对象，别只传name，不然子页面拿不到嵌套数组；
• 如果你的数据是从API获取的，要确保返回的字段名和你代码里用的完全一致（比如别把newsItems写成newsList）；
• 加个空值判断（比如this.targetCity?.newsItems），避免页面加载时数据还没到位出现报错。

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