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在其他地方动态更新的情况下更安全。

Ionic 2在同一个html中将数据从<ion-content>传递到<ion-footer>

1 个答案: