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

Posted 2023-03-13

【中文标题】如何在ionic 3中显示json描述各自的id

【英文标题】：how to show the json description respective id in ionic 3

【发布时间】：2019-07-15 04:01:43

【问题描述】：

我有一个像 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);

【问题讨论】：

请给我任何关于 json 格式的建议。我是否有适合此任务的 json 格式？

对于未来的问题：屏幕截图和 JSON/数据不如相关代码的最小摘录重要。这将大大提高速度和答案数量；）***.com/help/how-to-ask

【参考方案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数据，就可以了。

【讨论】：

loadDataSample() 让数据：Observable;数据 = this.http.get('assets/english.json'); data.subscribe(result => this.items = result; )

我正在使用此代码来获取english.json 数据。这段代码中的 itemApi 是什么？

如果您在多个页面上需要english.json 的内容，您的loadDataSample() 应该放在一个服务（“itemApi”）中。所以你可以从任何地方绑定到itemApi.items。