Question

对不起，如果这令人困惑，这是我的第一个离子项目。所以我有一个数据数组（行上面的东西是主页，下面是第一个子页面）

this.cities = [
        {
          name: 'Miami',
          shortName: 'Mi',
          events: '12',
          news: '15',
          weather: '29',
          crimeAlert: 'n',
          crimeAlertTitle: '',
          crimeAlertBody: '',
          newsItems: [{
            name: 'someNewsItem 1',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBody 1'
          },{
            name: 'someNewsItem 2',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBody 2'
          }],
          eventItems: [{
            name: 'someEventItem 1',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBodyEvent 1'
          }]
        }, ...
       ];
       
       
       goToCityPage(c) {

    this.navCtrl.push(CityViewPage, {
      'name': c.name,
      'shortName': c.shortName,
      'events': c.events,
      'news': c.news,
      'weather': c.weather,
      'crimeAlert': c.crimeAlert,
      'crimeAlertTitle': c.crimeAlertTitle,
      'crimeAlertBody': c.crimeAlertBody,
      'newsItems': c.newsItems,
      'newsItemsName': c.newsItems.name,
      'newsItemsBody': c.newsItems.body,
      'newsItemsImaged': c.newsItems.imaged,
      'newsItemsImage': c.newsItems.image,
      'eventItems': c.eventItems,
      'eventItemsName': c.eventItems.name,
      'eventItemsBody': c.eventItems.body,
      'eventItemsImage': c.eventItems.image,
      'eventItemsImaged': c.eventItems.imaged
    });

  }
        
        ______________________________________________________
        
        constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.city = this.navParams.get('name');
    this.cityShort = this.navParams.get('shortName');
    this.events = this.navParams.get('events');
    this.news = this.navParams.get('news');
    this.weather = this.navParams.get('weather');
    this.crimeAlert =  this.navParams.get('crimeAlert');
    this.crimeAlertTitle =  this.navParams.get('crimeAlertTitle');
    this.crimeAlertBody =  this.navParams.get('crimeAlertBody');
    this.newsItemsName =  this.navParams.get('newsItemsName');
    this.newsItemsBody =  this.navParams.get('newsItemsBody');
    this.newsItemsImaged =  this.navParams.get('newsItemsImaged');
    this.newsItemsImage =  this.navParams.get('newsItemsImage');
    this.eventItemsName =  this.navParams.get('eventItemsName');
    this.eventItemsBody =  this.navParams.get('eventItemsBody');
    this.eventItemsImaged =  this.navParams.get('eventItemsImaged');
    this.eventItemsImage =  this.navParams.get('eventItemsImage');

    this.newsEvents = [
      {
        pageTitle: 'Recent News',
        name: this.city,
        itemName: this.newsItemsName,
        imaged: this.newsItemsImaged,
        image: this.newsItemsImage,
        body: this.newsItemsBody
      },
      {
        pageTitle: 'New Events',
        name: this.city,
        itemName: this.eventItemsName,
        imaged: this.eventItemsImaged,
        image: this.eventItemsImage,
        body: this.eventItemsBody
      }
    ]
  }

还有更多类似的阵列。我正在抓取与内部阵列无关的数据。但是我在从“子数组”（即newsItems和eventItems）中提取数据时遇到问题

项目的低位是一个主页，只显示块中城市的名称（即数组的名称部分）。 - ＆GT;当点击时，它会进入具有该城市的子页面及其相关信息（即短名称，事件数量，新闻数量，天气，crimeAlert（＆lt; - 如果这是n，则不会显示在dom上）），crimeAlertTitle，crimeAlertBody）。在该子页面的底部，它有两个选项“最近新闻”和“新事件”。 - ＆GT;当点击时，它进入城市信息子页面的子页面，它具有指定的标题（即最近新闻或新事件）并显示其下的城市名称。我的问题是，在这个页面上，我无法在这个页面上显示newsItems或eventItems。特别是因为可能有多个，我无法弄清楚* ngFor适用于所有这些。

Answer 1

我发现访问对象中属于数组的属性并不适用于* ng For ...我为解决这个问题所做的工作就是在你的.ts文件返回数组...所以不要做这样的事情： .ts文件：

getNewsItems(index: number) {
   return this.cities[i].newsItems as any[]; // 'as any[]' might not be needed
}

html：

<div *ngFor="let city of cities; index as i;">
    <div *ngFor="let newsItem of getNewsItems(i)">{{newsItem.body}}</div>
</div>

数组中的数组并使用该数据

1 个答案: