使用按钮单击“离子”将数据显示到其他页面?

时间:2018-09-04 07:05:19

标签: ionic2 pass-data

我正在收到这种回复

{
    "value": [
        {
            "AttachmentFiles": [
                {
                    "odata": "SP.Attachment",
                    "odata": "AttachmentFiles('b1.jpg')",
                    "odata": AttachmentFiles('b1.jpg')",
                    "FileName": "b1.jpg"
                }
            ],
            "Id": 1,
            "Title": "Article #1",
            "LongStory": "is designed to convey the business impact it generates.",
            "SortStory": "professional services firm ",
            "ArticleCategory": "News",

        },
        {
            "AttachmentFiles": [
                {
                    "odata": "SP.Attachment",
                    "odata": "https://('b3.jpg')",
                    "odata": "/AttachmentFiles('b3.jpg')",
                    "FileName": "b3.jpg"
                }
            ],
            "Id": 2,
            "LongStory": "In June 2017",
            "SortStory": "is a professional services
            "ArticleCategory": "News",
            "Title": "Article #2",

        }
    ]

}

我必须在另一页上用“ FileName”值显示长篇故事。

我的html代码在下面

<ion-content padding style="background:reds!important;" class="no-scroll">
    <ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" >
            <ion-slide #slide *ngFor="let robot of _robots; let i = index " >
                    <ion-item >
                             <div attr.id="Testing{{i}}"></div>>
                        <h1>{{robot.Title}}</h1>
                        <p>{{robot.SortStory}}</p>
                    </ion-item>
                    <button ion-button (click) = "goToLongStory()" icon-start large round color="dark">
                            <ion-icon name="star"></ion-icon>
                            clike me m8
                          </button>
                </ion-slide>
    </ion-slides>
</ion-content>

任何人都可以帮我这个忙吗,在每张幻灯片上我都有一个按钮,单击按钮时我必须向其他页面显示相关数据,例如长故事,标题,文件名。

请帮助我。

1 个答案:

答案 0 :(得分:1)

在您的构造函数中放置

public navCtrl: NavController, `

比函数中的

goToLongStory()传递要访问的索引,并过滤具有所需索引的详细内容。然后,只需调用新页面并传递参数即可。

this.navCtrl.push('newPage', { longStory: LongStory });

在“ newPage”页面上,您需要将以下内容添加到构造函数中:

public navParams: NavParams

而不是将LongStory从navParams转换为您选择的变量。

let yourNewVariable: string = navParams.get("LongStory ");