Clickable list from firebase

Ionic Framework ionic-v3
1

Okay, so I’m trying to fetch data from firebase and display it on ionic as a list. I want the list to be clickable and will show me what’s inside the selected item. I clicked on the first item on the list and it showed me what I wanted to see. But for some reason, when I clicked on the second item it showed me the “thing” that is inside the first item.

capt

This is my modal.

export interface ShortItem{
	$key?: string;
	itemNameS: string;
	itemNameS1: string;
}

This is my code to call the list. StoryTitle.html

<ion-list style="background-image: url('assets/verse.jpg'); background-size: cover; border-radius: 25px;">
    <button ion-item style="font-size: 20px;" class="opacity" *ngFor="let item of ShortRef$ | async" (click)="getNote()">{{item.itemNameS}}</button>
  </ion-list>

This is how I call what’s inside the selected item.

<ion-card text-wrap style="background-image: url('assets/verse.jpg'); background-size: cover; border-radius: 25px;">
    <ion-card-content *ngFor="let item of ShortRef$ | async">
      <br><h1>{{item.itemNameS}}</h1><br>
      <hr/><br>
      <div style="font-size: 17px;">{{item.itemNameS1}}</div>
    </ion-card-content>
</ion-card>

I just want to click the selected item and show me what’s inside it. I hope I discussed my problem clearly.

capt1
capt1.JPG290×514 14.5 KB
capt2
capt2.JPG290×515 35.1 KB

2

Hello.
Can you show what your getNote() function does?

3

Oh it’s to go to another page when you clicked the button.

getNote(){
    this.navCtrl.push(StoryviewPage);
  }