In angular, when a page is opened in edit mode using query params, value in dropdown is not coming in mat select - ngmodel

Question

customer_name is not displayed in dropdown.
In .ts file, in ngOnInit() I have used query params to open a page in edit mode.
ngOnInit(): void {
this.addInvoiceItem();
this.route.queryParams.subscribe((params) => {
if (params._id === undefined) {
this.isEdit = true;
console.log(this.isEdit);
} else {
this._id = params._id;
this.service.fetchInvoiceById(this._id).subscribe((data) => {
this.invoice = data;
console.log(this.invoice.customer_details);
this.customerService
.fetchCustomerById(this.invoice.customer_details)
.subscribe((data) => {
this.invoice.customer_details = data;
console.log(this.invoice.customer_details);
});
});
}
this.customerService.fetchAllCustomers().subscribe((data) => {
this.custList = data;
console.table(this.custList);
});
this.availService.fetchAllCustomers().subscribe((data) => {
this.servicesList = data;
console.table(this.servicesList);
});
});
}
In console.log(this.invoice.customer_details) I can see customer_name in debug. But in display customer_name is not coming.
In html file,
<mat-select
name="customer_details"
[(ngModel)]="invoice.customer_details"
#customer_details="ngModel"
(selectionChange)="updateAddress()"
required
[displayWith]="displayCustomer"
>
<mat-option
*ngFor="let cust of custList"
[value]="cust"
required
>
{{ cust.customer_name }}
</mat-option>
</mat-select>