I've encountered a perplexing issue in my Angular app where an array is logged before adding an element to it, yet the log shows the updated array with the added element. This array is then utilized in an HTML file with ngFor.
component.ts file
interface OrderItem {
quantity: number | null,
product: any
}
export class Component{
orderItems: OrderItem[] = [{ quantity: null, product: {} }]
addProduct(): void {
console.log(this.orderItems);
this.orderItems.push({ quantity: null, product: {} })
}
}
html file
<mat-form-field>
<ng-container *ngFor="let ele of orderItems">
<mat-form-field>
<mat-label>Product</mat-label>
<mat-select [(ngModel)]="ele.product">
<mat-option *ngFor="let e of productlist" [value]="e._id" >{{e.productName}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Number of Items</mat-label>
<input matInput type="number" [(ngModel)]="ele.quantity" placeholder="Enter the number of items">
</mat-form-field>
<br>
</ng-container>
<button mat-icon-button (click)="addProduct()">
<mat-icon>add</mat-icon>
</button>
</mat-form-field>
The output in the console is quite peculiar :
[{…}]
This results in an array with two objects :
[{ quantity: null, product: {} },{ quantity: null, product: {} }]