Embarking on the journey of learning Angular has been quite a challenge for me. One specific difficulty I've encountered is extracting an item from an array and displaying it in the corresponding HTML file within that component. The snippet below illustrates the onClick function in 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);
}
I'm looking to showcase the item array in my bill-item.component.html, which is depicted 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 initial item list appearance after adding the first item can be seen in the following image:
https://i.sstatic.net/LoUt9.png
However, upon adding a second item, the layout of the item list shifts as shown in this image https://i.sstatic.net/D1YTG.png
All the items are being consolidated into the same row, when what I desire is each item to be displayed on a separate line.
In an attempt to achieve the desired display, I tried the code snippet below:
<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>
https://i.sstatic.net/nOeWk.png
However, the result was not as expected. The ID corresponds to entry[0], resulting in all instances of the array populating that field.
The screenshot below displays the output of console.log(arr) after adding 3 items: https://i.sstatic.net/uj0sw.png