将来自 Ionic 3 列表中的一项显示到另一页答案

【问题标题】：Display to another page one item comming from an list in Ionic 3将来自 Ionic 3 列表中的一项显示到另一页
【发布时间】：2018-12-18 05:50:10
【问题描述】：

根据 ionic 项目，我显示了一个列表，因此我在 ion-item 上循环使用 ngFor 返回来自 Json 的消息列表：*ngFor="let notification of feed.getNotifications()" (click)="openImportantMsg(i)"。

根据该项目列表（谁是另一个离子页面的一部分），当我单击一个项目时，我会在模式中显示相同的消息（模式也是另一个页面），实际上它几乎可以工作，但是我在我的模态调用important-msg中返回了整个项目数组，我只需要显示选定的项目。

这个想法是在模态（important-msg）中检索选定的项目，也许只有 css 方式是最好/最简单的方法？

提前致谢，如有任何问题，请随时提出。

这是我的实际代码，包括一个非常好用的函数绑定方法：

app.html:

<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>

app.ts:

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

important-msg-controller.ts:

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

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

    constructor() {}

    show(message: string): void {}

    hide(): void {}

    customeNotif(message): void {}
}

important-msg.html:

<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>

重要的msg.ts：

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;
    }
}

我尝试用这个标记选定的元素，给他一个 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;
}

【问题讨论】：

我对你到底想要做什么感到困惑。您想只显示您在 app.html 中选择的一项吗？反之亦然？
@HyuckKang 是的，我想在 app.html 中显示该项目，但我找到了一个单独的方法，我会发布我的答案

标签： html css angular typescript ionic3

【解决方案1】：

终于找到了，很简单：

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);
   }

重要的msg.html：

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

PS：我删除了important-msg.ts和important-msg.controller.ts中的所有其他代码

【讨论】：