How to output items from an array in angular - arrays

Question

Im really new to angular. And I find that it is really hard to get an item from an array and output in the relevant html file in that component.
The below code shows the onClick function of the bill-item.component.ts file
arr: Array<any> =[];
itemArray: Array<any> =[];
onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){
this.itemArray.push([itemId,name,expireDate,quantity]);
this.arr.push(this.itemArray);
console.log(this.arr);
}
And I need to output the item array on my bill-item.component.html which is shown below
<tbody>
<tr *ngFor="let itemArrays of arr">
<td *ngFor="let obj of itemArrays">{{obj[1]}}</td>
<td *ngFor="let obj of itemArrays">{{obj[0]}}</td>
<td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
<td *ngFor="let obj of itemArrays">{{obj[2]}}</td>
<td *ngFor="let obj of itemArrays">{{obj[3]}}</td>
</tr>
</tbody>
The below image shows the item list when I add the first item
But after adding the second item , the item list shows like this
Here all the items gets add up to the same row , I want to get each item in separate row , line after line.
Then I tried the below code
<tbody>
<tr *ngFor="let entries of arr">
<td>{{entries [1]}}</td>
<td>{{entries [0]}}</td>
<td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
<td>{{entries [2]}}</td>
<td>{{entries [3]}}</td>
</tr>
</tbody>
And this was the result. As ID has the entry[0] it was filled with all the instances in that array.
The below image shows my console.log(arr) result after adding 3 items

Answer 1

you can easily get values from "itemArray" rather than use "arr" and get the item details and print in table.
<table>
<tr *ngFor="let x of itemArray">
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
</tr>
</table>
like wise

Answer 2

you do not need to use *ngFor for each of entries as you are using array indexes like entries[1]
<tbody>
<tr *ngFor="let entries of arr">
<td>{{entries [1]}}</td>
<td>{{entries [0]}}</td>
<td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
<td>{{entries [2]}}</td>
<td>{{entries [3]}}</td>
</tr>
</tbody>
I tried this above code with following value of arr
arr = [['a','b','c','d'],['a1','b1','c1','d1']]
and got the result as

Answer 3

There is no need for iterating itemArrays. You can directly access element using the index.
Remove *ngFor of each itemArrays on each row.
<tbody>
<tr *ngFor="let itemArrays of arr">
<td>{{itemArrays[1]}}</td>
<td >{{itemArrays[0]}}</td>
<td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
<td >{{itemArrays[2]}}</td>
<td>{{itemArrays[3]}}</td>
</tr>
</tbody>

Answer 4

In td you are already accessing the items in the array, so you do not need to use *ngFor.
<tbody>
<tr *ngFor="let itemArrays of arr">
<td>{{itemArrays[1]}}</td>
<td>{{itemArrays[0]}}</td>
<td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
<td>{{itemArrays[2]}}</td>
<td>{{itemArrays[3]}}</td>
</tr>
</tbody>