离子滑动循环显示最后的第二张幻灯片

我正在用幻灯片在离子3中开发应用程序。我在加载视图时使用* ngFor创建幻灯片。我已将循环属性保留为true，以便从上一张幻灯片导航后，幻灯片1应可见。以下是我的代码离子滑动循环显示最后的第二张幻灯片

<ion-slides loop> 
<ion-slide *ngFor="let card of myCards; let i=index"> 
<ion-card>{{card.name}}</ion-card> 
</ion-slide> 
</ion-slides>

幻灯片在设备上正确呈现。但是，当我从上一张幻灯片的下一张幻灯片中看到幻灯片2而不是幻灯片1.如果我在看到幻灯片2时稍微拖动屏幕，则看到幻灯片1.我不确定视图没有得到更新。如果我做错了什么，有人可以帮助我吗？

编辑： 我收到卡阵列的存储像这样ionViewWillEnter事件：

this.storage.get(val =>{ 
this.myCards = val; 
})

阵列具有以下结构：

[{'name': 'xyz', 'message': 'message1'}, 
{'name': 'pqr', 'message': 'message2'}, 
{'name': 'abc', 'message': 'message3'}]

来源

2017-06-01 Prabi

你可以尝试使用硬编码的数据吗？看起来您的myCards阵列在阵列末尾有第二张卡的副本。 –

请提供myCards数组数据和回调函数（如果有） –

更新了该帖子。我不确定最终如何拥有第二张牌的副本。你能否详细说明你的想法？ – Prabi

我认为有一些问题，你的数组操纵或存储操作。尝试下面的代码。

this.myCards = [ 
        {'name': 'xyz', 'message': 'message1'}, 
        {'name': 'pqr', 'message': 'message2'}, 
        {'name': 'abc', 'message': 'message3'} 
       ];

如果上面的代码工作正常，那么问题是与您的存储操作或数组操作。

来源

2017-06-02 04:35:40

离子滑动循环显示最后的第二张幻灯片

回答

相关问题