Opening pages with ngFor

Ionic Framework ionic-v3
1

ı am stuck on for using two ngFor .

home.html

<ion-content *ngFor=“let item of items”>



<ion-col col *ngFor=“let person of people” (click)=“openPage(item)”>



{{person.lesson_d.name}}


home.ts

items=[

   {,component:'FirstPage'},
   {component:'secondPage'},
   {component:'thirdPage'},
   {,component:'fourthPage'},
 
 ]

openPage(page){

  this.navCtrl.setRoot(page.component); 
  }

my code like this.But when ı am running everthing is okey except opening always “fourthPage”.
İn every item opening same page which is “fourthPage”
so please help me.

2

Can you try this

<ion-list *ngFor=“let item of items”>
      {{item.component}}
      <ion-item *ngFor="let person of people” (click)="“openPage(item)">
            {{person.lesson_d.name}}
      </ion-item>
 </ion-list>
3

thank you for answer but didnt work .
output like this.

firstPage
abc
edf
secondPage
abc
edf
thirdPage
abc
edf
fourthPage
abc
edf

plaase help me

4

the problem may be because you are generating multiple <ion-content> tags. There should be only one per page: https://ionicframework.com/docs/api/content

Hope this helps.

1 Like
5

ı just used only one ion-content tag.
ı dont know what is the wrong.
please help me.

6

When you put an *ngFor loop in a tag you’ll end up with multiple of those tags. E.g.,

<ion-list *ngFor="let item of items">

will generate one <ion-list> tag for each item in items. So, if you put

<ion-content *ngFor="let x of someList">

you’ll get multiple <ion-content> tags generated.

1 Like
7

So persons and items are independent sets of data. Can you explain what you are trying to do with items and persons?

8

people is my json array which ı want to display in the page. Item is my page array which ı want to push for each person. But every person go to same page . I want to push different pages. please help me.

9

Do you want to display the list of people on the home page? and then when u click on a person name, which page should it navigate to?
If you are looking to use nested ngFor loops, you need to first workout on how to loop over items and persons first. Then you could use ion-list and ion-item and do something like this

<ion-list *ngFor=“let person of people”>
      {{person.lesson_d.name}}
      <ion-item *ngFor="let item of items” (click)="“openPage(item)">
            {{person.lesson_d.name}} {{item.component}}
      </ion-item>
 </ion-list>
10

I solved my problem like this.

<ion-col col *ngFor=“let person of people; let i=index” >

{{person.lesson_d.name}}

thank you for your answer