如何在ionic 3中显示json描述各自的id

Question

我有一个像 json 这样的文件

[{
    "id": "1",
    "title": "Abba Father (1)",
    "description": "Abba Abba Father."
},
{
    "id": "2",
    "title": "Abba Father, Let me be (2)",
    "description": "Abba Father, Let me be (2) we are the clay."
},
{
    "id": "3",
    "title": "Abide with me (3)",
    "description": "Abide with me (3) we are the clay."
}]

当用户单击主页中的标题列表时，我可以在下一页显示描述。但是在下一页我有下一个和上一个按钮，当用户单击下一个按钮时，我需要显示下一个描述。谁能指导我完成这项任务

我正在使用这个项目来实现它。

https://github.com/kristofferandreasen/simple-ionic-3-app

constructor(
    public navCtrl: NavController,
    private navParams: NavParams,
    // private itemApi: ItemApi
)
{
    this.item = this.navParams.data;
    console.log(this.item);
    console.log(this.item.id)
}


navigatePrivious($event, item)
{
    this.navCtrl.push(SingleSongPage, item);
}

navigateNext($event, item)
{
    this.navCtrl.push(SingleSongPage, item);
}

Answer 1

在您的SingleSongPage 上，您只能通过NavParams 服务获得一项。
因此，您唯一拥有的用于指示下一项和上一项是什么的就是当前的item。

您现在只能从ItemApi 服务获得这两个项目。
所以取消注释并使用它：

ionViewDidLoad() {
    this.itemApi.getItems().then(data => {
        let currentIndex = data.indexOf(this.item);
        if (currentIndex > -1) {
            this.nextItem = data[currentIndex + 1];
            this.previousItem = data[currentIndex - 1];
        }
    });
}

在您看来，将nextItem 和previousItem 作为参数传递：

<ion-button (click)="navigate($event, previousItem)">Previous Item</ion-button>
<ion-button (click)="navigate($event, nextItem)">Next Item</ion-button>

（您的navigateNext 和navigatePrivious 函数变为navigate）。

当然，我想，在每次加载 SingleSongPage 时加载所有项目并不是最佳做法。 itemApi 服务或任何其他服务应该保存/缓存所有（或所有）项目。
或者 API 应该提供类似getNextSong(currentId: number): SongItem.
但是如果是这个静态的json文件或者mockup数据，就可以了。