将另一个来自Ionic 3列表的项目显示到另一页

Question

According to ionic project, I display a list so I am looping on ion-item using ngFor to return a list of message comming from a Json : *ngFor="let notification of feed.getNotifications()" (click)="openImportantMsg(i)" .

According to that list of item (who's part of another ionic page), when I click on an item I display the same message in a modal (the modal is another page as well), actually it almost works but I am returning the whole array of item in my modal call important-msg and I need only the selected one to display.

The idea is to retrive the selected item in the modal (important-msg) maybe only css way is the best / easy way to make it?

Thanks in advance and feel free to ask any question I stay around.

Here is my actual code including a function binding method who's really great to use:

<div>
    <h2>Notifications</h2>
    <ion-item no-lines text-wrap *ngFor="let notification of 
    feed.getNotifications()" (click)="openImportantMsg(i)">
    <ion-icon name="notifications" color="primary" item-start></ion-icon>
        {{ notification.message }}
    </ion-item>
</div>

openImportantMsg(message, i): void {
    this.importantMsgCtrl.show(message);
    this.importantMsgCtrl.customeNotif(i);
}

import { Injectable } from '@angular/core';

@Injectable()
export class ImportantMsgController {
    message: any;

    constructor() {}

    show(message: string): void {}

    hide(): void {}

    customeNotif(message): void {}
}

<ion-item no-lines text-wrap *ngFor="let notification of feed.getNotifications(); let isOdd = odd; let i = index;">
    <div *ngIf="i == isOdd"> {{notification.message}}</div>
    <p>{{isEven}} here come isEven</p>
    <p>{{i}}Here comes index</p>
</ion-item>

export class ImportantMsgComponent {
    active: boolean = false;
    message: string;
    feed: Feed = new Feed();

    constructor(
        private importantMsgCtrl: ImportantMsgController,
        public feedService: FeedService
    ) {
            this.importantMsgCtrl.show = this.show.bind(this);
            this.importantMsgCtrl.hide = this.hide.bind(this);
            this.importantMsgCtrl.customeNotif = this.customNotif.bind(this);
            console.log('Hello ImportantMsgComponent Component');

            this.feedService.feedAsObs.subscribe(feed => {
                if (feed) {
                    this.feed = feed;
                }
            });
        }

show(message: string): void {
    this.active = true;
    this.message = message;
}

hide(): void {
    if (this.active) {
        this.active = false;
    }
}

With this one I tried to flag the selected element giving him a id

customNotif(message: any) {
    let i = [];
    for (message = 1; message < 100; message++) {
        console.log(message, 'here is message value');
    }
    console.log(i, 'here is i value !');
    return i;
}

Answer 1

Finally I found it and it was pretty simple:

app.html:

      <ion-item no-lines text-wrap *ngFor="let notification of 
    feed.getNotifications()" 
   (click)="openImportantMsg(notification.message)">
        <ion-icon name="notifications" color="primary" item-start></ion-icon>
        {{ notification.message }}
      </ion-item>

app.ts:

  openImportantMsg(message): void {
    this.importantMsgCtrl.show(message);
   }

important-msg.html:

 <p>{{message}}</p>

PS: And I delete all the other code in important-msg.ts and important-msg.controller.ts