NGfor link


#1

Hello

So I wanted to make a list and that returns data from this api https://api.irail.be/connections/?from=Gent-Sint-Pieters&to=Mechelen&format=json

The problem I’m having that I want to click on a link and then get the right one because now it’s always one so I wonder how I can do that

 <button (click)="redirectToDetails()" class="btn detailbtn">Details</button>

in the ts file I have this

  redirectToDetails() {
    this.navCtrl.push(SearchDetailsPage);
  }

So on that page I want to display the info of the element that has been clicked in the ngfor

I wonder how I can do that

I hope someone can help me

Greetings
Ditger


#2

Inside your *ngFor you shoud have a variable which contains the information of the current iteration. Simply pass that through to your function like:

 <button (click)="redirectToDetails(myElement)" class="btn detailbtn">Details</button>

Inside your function you can than push the information along to the next page like:

redirectToDetails(selectedItem) {
    this.navCtrl.push(SearchDetailsPage, {item: selectedItem});
  }

Finally, inside your SearchDetailsPage get the information from the navParams like this:

constructor(public navCtrl: NavController, public navParams: NavParams) {
  this.item = this.navParams.get('item');
}

Now you got the item inside your details page and can use it there. Just make sure to pass in the right information/object from your ngFor and everything will be fine :slight_smile:


#3

Okay so I tried this in the html

<ion-slide *ngFor="let connection of connection">
   
            <div class="hours">
              <div class="hour1">{{connection.departure.time'}</div>
            </div>
            <div class="btn-container">
              <button (click)="redirectToDetails(connection)" class="btn detailbtn">Details</button>
            </div>
          
</ion-slide>

in the .ts , underneath there is a function to get some info from the api

  connection: Array<Object> = []; 
  connectionObservableArray: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public iraildataService: IRailDataProvider) {
    this.item = this.navParams.get('item');
  }

  redirectToDetails(selectedItem) {
    this.navCtrl.push(SearchDetailsPage, {item: selectedItem});
  }

So I only get the error on this.item in the .ts so I don’t know what I’m doing wrong


#4

The part where you get the item from the navParams need to be inside your SearchDetailsPage. Remember, you push the page on the stack and pass the value of your selectedItem to that page. Then you need to access that value from the navParams inside that page!


#5

I did that now but still the same error, sorry if I don’t get it easy, I’m just a beginner in using Ionic

On the first page .html

<ion-slide *ngFor="let connection of connection">
   
            <div class="hours">
              <div class="hour1">{{connection.departure.time'}</div>
            </div>
            <div class="btn-container">
              <button (click)="redirectToDetails(connection)" class="btn detailbtn">Details</button>
            </div>
          
</ion-slide>

the .ts of the first page

  redirectToDetails(selectedItem) {
    this.navCtrl.push(SearchDetailsPage, {item: selectedItem});
  }

the second Search Details .ts

   constructor(public navCtrl: NavController, public navParams: NavParams, public iraildataService: IRailDataProvider) {
        this.item = this.navParams.get('item');
    }

Could it be something in the html of the search details?

<ion-list>
    <ion-item *ngFor="let connection of connection | slice:0:1; let i=index">
      <div class="detailBox" *ngIf="i<1">
        <h3>Van: {{connection.departure.stationinfo.standardname}}</h3>

        <div class="detailBoxHelper">
          <div class="c1">
            <p>Spoor {{connection.departure.platform}}</p>
          </div>
          <div class="c1">
            <p>Spoor {{connection.arrival.platform}}</p>
          </div>
        </div>
      </div>
    </ion-item>
  </ion-list>

#6

I can’t see your wholeS SearchDetailsPage, but is there a class variable “item” that you use with this? Also, do you have the “connection” variable as well? Always make sure that you have the variables you use inside the connected HTML also inside the class!


#7

@saimon is is the whole search detail page

<ion-list>
    <ion-item *ngFor="let connection of connection | slice:0:1; let i=index">
      <div class="detailBox" *ngIf="i<1">
        <h3>Van: {{connection.departure.stationinfo.standardname}}</h3>

        <div class="detailBoxHelper">
          <div class="c1">
            <p>Spoor {{connection.departure.platform}}</p>
          </div>
          <div class="c1">
            <p>Spoor {{connection.arrival.platform}}</p>
          </div>

        </div>
        <h3>Naar: {{connection.arrival.stationinfo.standardname}}</h3>
      </div>
    </ion-item>
  </ion-list>

I tried to change the search details.ts into this
this.connection = this.navParams.get('item');

But that just gives me the InvalidPipeArgument: '[object Object]' for pipe 'SlicePipe'


#8

The selected item you are pushing to the details page is not the full array you are iterating but just one object of that array! Therefore I guess that this object is no array hence the slice pipe is not working (as it’s not array you are passing in).

Try to add some logs to see what objects you pass around and when you have which type like array/object!


#9

This is the array that is displayed on the first page with the detail button that has to redirect to the details page


#10

Ok, but when you push the details page you push one object of that array! If you want to push the full array to the next page, the button kinda makes no sense how it is currently named. Don’t get confused with the names connection / connections and make sure you send the right object to the next page.


#11

I’m again sorry that I can’t figure it out, since its all still new to me but I tried to recreate a bit of what I wanna do on stackblitz, you can view that here https://stackblitz.com/edit/detailpage

In that example I take the whole array but my array is slightly different in the real project https://api.irail.be/connections/?from=Gent-Sint-Pieters&to=Mechelen&format=json

So I think it works kinda the same?


#12

Okay so i tried a different approach and started to think more logically and i got it working :slight_smile: thanks a lot for the help and i sure did learn a lot