html - Ionic 2 从至在同一个html中

Question

我在 Ionic 2 中有一个 html 页面，我在其中使用 *ngFor 生成离子幻灯片，并且我想将数据从 ngFor 传递到同一页面的页脚。

<ion-content>
    <ion-slides>
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{event.message}}</p>
    </div>
</ion-footer>

如何将 event.message 传递给页脚？

Answer 1

您需要有一个可以更新的模板变量。这里这个例子使用了一个名为 的变量current。

<ion-content>
    <ion-slides (ionSlideDidChange)="current = completeEvents[$event.getActiveIndex()]">
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{current ? current.message : completeEvents[0].message}}</p>
    </div>
</ion-footer>

该ionSlideDidChange事件发出一个组件$event的实例引用Slides。因此，您可以使用它来调用文档中任何已发布的方法。

我不确定是否在第一次显示第一张幻灯片时触发了该事件。因此，我添加了current || 0始终显示第一个。

编辑：

我更改了答案，以便current包含对当前事件的引用。completeEvents这使得在其他地方动态更新的情况下更安全。