Display two array object data alternatively in typescript-CodePudding

I have one object as arrayobj1=[{"name":"hello1","age":"12"},{"name":"hello2","age":"115"}] and arrayobj2=[{"name":"hello3","age":"12"},{"name":"hello4","age":"12"}]

I want to display in html in table alternatively as

Hello1
Hello3
Hello2
Hello4

My code format to follow

<tr *ngFor="let obj of arrayobj1">
<td>obj.name</td>
</tr>
<tr *ngFor="let obj of arrayobj2">
<td>obj.name</td>
</tr>

But this only print the first how do I print both the loops alternatively.

CodePudding user response：

You can use the index of the ngFor and add a ngIf to hide the row you want !

For example:

<tr *ngFor="let obj of arrayobj1; let i =  index">
<td *ngIf="i % 2">obj.name</td>
</tr>

CodePudding user response：

If the arrays are always equal size, just use the index from either array. Since you want a separate row for each, you can use an ng-container to apply the same ngFor directive to both rows.

<ng-container *ngFor="let _ of arrayobj1; index as i">
  <tr><td>{{ arrayobj1[i].name }}</td></tr>
  <tr><td>{{ arrayobj2[i].name }}</td></tr>
</ng-container>