*ngFor inside *ngFor

Ionic Framework ionic-v3
1

Hi All,

I have a class defined in firebase which hierarchical in nature. Its about subscription plans where main node is having information related to main plan and there are certain child entries related to sub plan. Here is the json structure:

"paymentPlans" : [ null, {
    "planDetails" : [ null, {
      "Amount" : 1000,
      "Payment" : "One Time",
      "type" : "Registration"
    }, null, {
      "Amount" : 1500,
      "Payment" : "Monthly",
      "type" : "Workout"
    } ],
    "planName" : "Economy",
    "centerid" : 1
  }, {
    "plaDetails" : [ null, {
      "Frequency" : "One time",
      "Registration" : 1000
    } ],
    "planName" : "Gold",
    "centerid" : 1
  } ],

To show this inside HTML, here is the view which i want:

Economy
Registration(One Time): 1000
Workout(Monthly): 1500

Gold
Registration(One Time): 1000

To acheve this, i am trying to use *ngFor inside *ngFor but facing some challenges. Please suggest the right method to use *ngFor for this.

P.S: I am at very initial stage and open for storing data in some other format if that makes things simpler.

Thanks.

2

*ngFor = "let paymentPlan of paymentPlans"

and than

*ngFor = "let plaDetail of paymentPlan.plaDetails"

3

I tried that but it didn’t work. Do you think my data structure is fine for nosql database or is there any other way to simplify this?

4

Looks like there is a spelling issue: pla instead of plan.

If it were me, each detail would have the same number of keys, just as a row in a database would have the same number of columns, regardless of whether the column was null or populated.

5
6

This might have happened because of copy paste but there is no spelling issue in my actual code.

7

Thats awesome. Thanks a ton. Will try to change my code accordingly and let you know.