Question

在我的一个项目中，我试图创建一个项目列表，一旦用户按下某个项目，它们将被导航到一个新页面，其中将显示该项目的详细信息。它非常简单明了，商品的名称和详细信息已经写在第一页上，我希望将它们转移到下一页。但是，我不断收到错误消息：Argument of type '{ item: any; }' is not assignable to parameter of type 'NavigationOptions

这是我的代码，如下所示：这是显示所有项目列表的主页

HTML

<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)"><ion-card>
<ion-card-header>
<ion-card-subtitle></ion-card-subtitle>
<ion-card-title>{{item.title}}</ion-card-title>
</ion-card-header>

<ion-card-content>
{{item.description}}
</ion-card-content>
</ion-card></ion-item>
</ion-list>

TS

export class ShoppingPage implements OnInit {
  public item;
  constructor( public navCtrl: NavController ) { }

  ngOnInit() {
  }
  ionViewWillEnter(){
  this.item = [
      {title: 'Product 1', description: 'This is where we would would put the description of "product 1"'},
      {title: 'Product 2', description: 'This is how the description of Product 2 would look'},
      {title: 'Product 3', description: "Product 3 is the greatest product you can buy off the market because it's perfect"}
    ];
  }
  viewItem(item){
    this.navCtrl.navigateForward('item-detail', {
      item: item
    });
  }

}

现在这是我要求显示所有数据的页面代码：

html

<ion-header>
  <ion-toolbar>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
{{description}}
</ion-content>

TS

export class ItemDetailPage implements OnInit {
  title;
  description;
  constructor(public navParams: NavParams) { }
  ionViewDidLoad(){
    this.title = this.navParams.get('item').title;
    this.description = this.navParams.get('item').description;
  }
  ngOnInit() {
  }

}

谢谢

编辑：我正在使用离子4

Answer 1

在您的第一个TS文件中

public item;

到

public items;

和

this.item = [ {title: 'Product 1', description: 'This is where we would would put the description of "product 1"'}, {title: 'Product 2', description: 'This is how the description of Product 2 would look'}, {title: 'Product 3', description: "Product 3 is the greatest product you can buy off the market because it's perfect"} ]; }

到

this.items = [ {title: 'Product 1', description: 'This is where we would would put the description of "product 1"'}, {title: 'Product 2', description: 'This is how the description of Product 2 would look'}, {title: 'Product 3', description: "Product 3 is the greatest product you can buy off the market because it's perfect"} ]; }

在Ionic 4中无法查看项目详细信息

1 个答案: