Issue with autocomplete displaying [object Object] value in Angular TypeScript
I'm having trouble pinpointing the exact problem
HTML snippet
<mat-form-field style="margin-right: 10px;">
<input #productName matInput placeholder="Product" [(ngModel)]="objTaxInvoice.ProductName" aria-label="ProductName" [matAutocomplete]="autop" [formControl]="productCtrl">
<mat-autocomplete #autop="matAutocomplete" (optionSelected)="onProductSelectionChanged($event)">
<mat-option *ngFor="let product of filteredProducts | async" [value]="product">
<span>{{product.Name}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Component code
getProducts(): void {
this.productservice.getProductList().subscribe(data => {
this.products = data;
this.filteredProducts = this.productCtrl.valueChanges
.pipe(
startWith(''),
map(value => typeof value === 'string' ? value : value.Name),
map(name => name ? this._filterProducts(name) : this.products.slice())
);
});
}
onProductSelectionChanged(e) {
this.selectedProduct = e.option.value;
this.objTaxInvoiceDetails.Product = e.option.value;
this.objTaxInvoiceDetails.ProductName = e.option.value.Name;
this.objTaxInvoiceDetails.Unit = e.option.value.Unit;
}