How to get a specific element of a list (Lazy Loading)

Hi!

Can anyone help with this one?

list.html

<ion-list *ngFor="let homelist of homelists">
        <ion-list-header>
           {{homelist.headerName}}
        </ion-list-header>
        
        <button clear ion-item *ngFor="let homelistitem of homelist.items" (click)="itemClicked(homelistitem)">
            {{homelistitem.itemName}}
        </button>

    </ion-list>

list.ts

@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {
  homelists: any;
  itemInfo: any;
  
 

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public menuCtrl: MenuController,
    public data: DataProvider) {

      this.itemInfo = this.navParams.data;
      this.menuCtrl.enable(true, 'myMenu');

  }

  ionViewDidLoad(){
    this.homelists = this.data.lists;
}

  itemClicked(item):void {
    this.navCtrl.push('InfoPage', item);
}

Info.html

<ion-header>

  <ion-navbar>
      <ion-title>{{itemInfo.itemName}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    
    <h4>{{itemInfo.itemName}}</h4>
    <hr>
    <img src="{{itemInfo.img}}" class="cards">
    <hr>
    <div id="left">
      <h6>{{itemInfo.price}}</h6>
      <h6>{{itemInfo.location}}</h6>
      <p>{{itemInfo.chipset}}</p>
      <p>{{itemInfo.vent}}</p>
      <p>{{itemInfo.graphicsChip}}</p>
      <p>{{itemInfo.graphicsAcc}}</p>
      <p>{{itemInfo.memory}}</p>
    </div>
</ion-content>

info.ts

export class InfoPage {

  itemInfo: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.itemInfo = this.navParams.data;
  }

DataProvider

export class DataProvider {

    lists: any = [
        {
           
            img: 'https://asd.jpg',
            itemName: 'firstMemberofTheList',
            price: "$$$",
            chipset: "NG",
            vent: "2",
            graphicsChip: "1316 MHz",
            graphicsAcc: "7008 MHz",
            memory: "4096 MB",
            location: "13f"
            
        },
        {
             img: 'https://asd.jpg',
            itemName: 'secendMemberofTheList',
            price: "$$$",
            chipset: "NG",
            vent: "3",
            graphicsChip: "1316 MHz",
            graphicsAcc: "7008 MHz",
            memory: "4096 MB",
            location: "12f"
        }
];

My question is: how can i push directly to a selected itemName’s infopage?

Let’s say I have a ContactsPage and want to navCtrl.push to a specific item (firstMemberofTheList) on the list (which is lazy loaded). How can i do that?

Change it

to this

itemClicked(item):void {
    this.navCtrl.push('InfoPage',  { myItem: item });
}

and in infopage, use:

this.itemInfo = this.navParams.get('myItem');
1 Like

Nvm, i’ve solved the problem:

I push to the specific Info by the 'position of the data.
this.navCtrl.push('InfoPage', {"myItem": this.data.lists[1]});

1 Like