如何绑定到 Ionic 2 中 ngFor 循环中的项目？答案

【问题标题】：How to bind to an item in an ngFor loop in Ionic 2?如何绑定到 Ionic 2 中 ngFor 循环中的项目？
【发布时间】：2017-06-25 09:54:15
【问题描述】：

在我的模板中，我有

<ion-card *ngFor="let item of items">
    <p>{{ item.timespan }}</p>
</ion-card>

但是，我不想在循环内显示值，而是想从模板中的其他位置（在 ngFor 循环之外）绑定到它，例如

<h1>{{ timespan }}</h1>
<ion-card *ngFor="let item of items" [timespan]=“item.timespan”>
    …
</ion-card>

但我认为我不能使用 [timespan] 因为它不是 ion-card 的输入属性..

那么有谁知道我还能如何实现这个绑定？

非常感谢任何帮助。

【问题讨论】：

你试过*ngFor和template吗？ angular.io/docs/ts/latest/guide/…。您要完成的工作也有点不清楚。循环中渲染了多个元素？
谢谢silentsod。我试图简化代码。实际上，这些卡片被包装到 Angular2-swing 库中的“swing-stack”中。它不是以类似列表的方式显示所有项目，而是依次显示每张卡片，以类似火种的方式被刷掉。至于使用模板，这似乎是一个很好的解决方案......

【解决方案1】：

您可以通过使用template 而不是*ngFor 来处理循环来完成此操作：

<template ngFor let-item [ngForOf]="items">
  <h1>{{item.timespan}}</h1>
  <ion-card>
  …
  </ion-card>
</template>

这是一个Plunker，您可以随意使用。

【讨论】：

非常感谢silentsod，这行得通。我确实增加了复杂性，因为所有时间跨度都同时显示，而不是一次显示一个。但考虑到我在 cmets 中提到的情况，这种行为是可以预料的。