*ngFor - two different arrays for single row on table

Question

I need to populate table with two different arrays "A" and "B" into a same row.

let A = ["a","b","c","d"]
let B = ["success","success","success","success"];

HTML

<tbody>
  <ng-container *ngFor="let alphabet of A; let i = index">
  <tr *ngFor="let status of B; let i = index">
  <td >{{ alphabet }}</td>
  <td >{{ status }}</td>
  </tr>
  </ng-container>
</tbody>

But here with this i get repeated set of rows

Expected:

a    success
b    success
c    success
d    success

Not found any issue with your code

rajanbhadauria
– rajanbhadauria

2020-07-28 10:21:08 +00:00
Commented Jul 28, 2020 at 10:21 — rajanbhadauria
– rajanbhadauria, Commented Jul 28, 2020 at 10:21

Lutz Schönemann · Accepted Answer · 2020-07-28 10:20:30Z

2

You can access the the data of the second array by its index:

<tbody>
  <tr *ngFor="let alphabet of A; let i = index">
  <td >{{ alphabet }}</td>
  <td >{{ B[i] }}</td>
  </tr>
</tbody>

answered Jul 28, 2020 at 10:20

Lutz Schönemann

1,1398 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

*ngFor - two different arrays for single row on table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related