使用 Ionic 绑定单个离子项

【问题标题】：Binding a single ion-item using Ionic使用 Ionic 绑定单个离子项
【发布时间】：2016-05-15 14:00:10
【问题描述】：

如果我有一个列表，我可以像这样使用ion-item：

<ion-card ion-item *ngFor="#item of previous" (click)="itemTapped($event, item)">

我如何在同一个 wa 中使用 ion-item 并只使用一个项目？

文档对此不是很清楚，http://ionicframework.com/docs/v2/api/components/item/Item/

【问题讨论】：

请添加有关您实际尝试完成的更多详细信息。如果您删除 *ngFor...，那么您只有一个 <ion-card>。
我不确定我是否理解您的问题，但在我看来，您希望在您的ion-card 中有一个列表，如下所述：ionicframework.com/docs/v2/components/#card-list 请更具体地提出您的问题跨度>

标签： angular ionic2

【解决方案1】：

不完全确定您要做什么。如果您只想显示单个项目，请将您的项目绑定到单个对象，而不是对象数组。例如

您需要在组件中定义单个项目：

export class YourComponent {
  //...
  items: <Array>;
  singleItem: any;
  //...
  constructor() {
    //...
    this.singleItem = {
      data: "foo"
    };
  }
}

然后简单地将您的数据绑定到您的元素：

<ion-card ion-item (click)="itemTapped($event, singleItem)">
  {{ singleItem.data }}
</ion-card>

*ngFor="#x of y" 仅保留用于迭代 Angular2 中的数组，因此对于单个项目不是必需的。

如果您想将singleItem 数据设置为上一页的数据，我已根据您的示例进行了此操作。为了在页面之间传递数据/项目，请查看 Ionic2 NavParams 和 Ionic2 Navigation。

【讨论】：