Question

根据离子项目，我显示了一个列表，所以我使用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>

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

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

important-msg.html：

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

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

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

1 个答案: