0

我有一个空白的 ionic 2 项目，并且有一个带有列表的页面。当您单击一个列表项时，您应该会看到该项的详细视图。这是我的列表文件：

列表.html：

<ion-navbar *navbar>
  <ion-title>list</ion-title>
</ion-navbar>

<ion-content padding class="list">
    <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
    </ion-list>
</ion-content>

列表.js：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {ItemDetailPage} from '../item-detail/item-detail';

@Component({
  templateUrl: 'build/pages/list/list.html',
})
export class ListPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
      this.nav = nav;

      this.items = [
          {title: 'Hi1', description: 'whats up?'},
          {title: 'Hi2', description: 'whats up?'},
          {title: 'Hi3', description: 'whats up?'}
      ];
  }

  viewItem(){
      this.nav.push(ItemDetailPage, {
          item: item
      });
  }
}

这是我的详细视图文件：

详细视图.html：

<ion-navbar *navbar>
  <ion-title>{{title}}</ion-title>
</ion-navbar>

<ion-content padding class="item-detail">
    <ion-card>
        <ion-card-content>
            {{description}}
        </ion-card-content>

    </ion-card>  
</ion-content>

详细视图.js：

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/item-detail/item-detail.html',
})
export class ItemDetailPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(navParams: NavParams) {
      this.navParams = navParams;

      this.title = this.navParams.get('item').title;
      this.description = this.navParams.get('item').description;
  }
}

当我使用“离子服务”时，我收到以下消息：

SyntaxError: C:/.../app/pages/item-detail/item-detail.js: Unexpected token (18:23) while paring file: ...

所以我认为详细视图的构造函数不能这样工作。但我没有找到可以帮助我的东西。我认为这个解决方案已被弃用，因为我找到的教程是 2015 年的。但就像我说的，我没有找到有用的东西。我的 Ionic 框架版本是 2.0.0-beta.8

4

1 回答 1

2

这里：

(click)="viewItem(item)"

您将项目作为参数发送，但在方法中：

viewItem(){
  this.nav.push(ItemDetailPage, {
      item: item
  });
}

你没有得到它。我认为您只需要将它作为这样的参数包含在内，它应该可以正常工作：

viewItem(item: any) {
  this.nav.push(ItemDetailPage, {
      item: item
  })
}
于 2016-06-14T18:38:28.890 回答