Array of Arrays in Angular Class

Question

I'm new to Angular and cant really grasp how to loop through an array inside an array.

I'm trying to achieve same thing as the following C code:

   for (int i = 0; i < 10; i ++){
       printf ("%d", ar[i]);

       for (int j =0; j < 3; j ++ )
       {
           printf ("%d", arre[j]);
       }
       printf ("\n");
   }

But in my case I have a class:

class Arende{
    Id:number 
    Namn :string 
    Status :string 
    RegistreringLista :Registrering[]
}

HTML:

    <tr *ngFor="let arende of arenden">
      <td> {{arende.Id}} </td>
      <td> {{arende.Namn}}</td>
      <td> {{arende.RegistreringLista.xxxx}}</td>
      <td> {{arende.RegistreringLista.yyyy}}</td> 
      <td> {{arende.ResitreringsLista.zzzzz}}</td>

I thought that there should be some way to do a:

<tr *ngFor="let arende of RegistreingsLista">

But that dosen't seem right either ... I have trouble understanding the loop sequence ... How should I set it up?

The second one : ngFor="let item of arende.RegistreingsLista" ... ? — Vega, Jan 29 '19 at 09:23

score 2 · Answer 1 · answered Jan 29 '19 at 09:23

2

You can use nested ngFors in template:

<tr *ngFor="let arende of arenden">
      <td> {{arende.Id}} </td>
      <td> {{arende.Namn}}</td>
      <td *ngFor="let inner of arende.RegistreringLista"> {{inner.xxxx}}</td>
</tr>

answered Jan 29 '19 at 09:23

Harun Yilmaz

8,281
3
24
35

Problem is that I can't add a ngFor inside a tag. It screws up the HTML. But I saw something called "ng-container" - this may solve it. I'll try some stuff and come back! – Frank M. Jan 29 '19 at 09:39
If you provide what you want to achive by creating the table manually in [stackblitz](https://stackblitz.com), perhaps I can help you further. And yes, `ng-container` is more than helpful in many situtations. – Harun Yilmaz Jan 29 '19 at 09:46

Frank M. · Accepted Answer · 2019-03-25T08:44:30.083

1

So this is how I solved the problem:

   <ng-container *ngFor="let arende of arenden">
    <tr *ngFor ="let item of arende.RegistreringLista">
      <td> {{arende.Id}} </td>
      <td> {{arende.Namn}}</td>
      <td> {{item.XXXX}}</td>
      <td> {{item.YYYY}}</td>
      <td> {{item.ZZZZ}}</td>

I used "Ng-container" not to screw with the HTML.

edited Mar 25 '19 at 08:44

answered Jan 29 '19 at 09:56

Frank M.

11
1
4

Array of Arrays in Angular Class

2 Answers2