I am having trouble setting the selected value of a mat-select dropdown in my component. The issue arises when I try to display services that have already been added using the same component for adding services. Despite attempting to use NgModel and specifying the service.serviceId as the value, the selected option does not appear in the dropdown. How can I make this component allow users to select services while also manually setting the displayed service with data from bookingServiceTime as the preset selected value? Any assistance would be greatly appreciated. Thank you.
<mat-form-field>
<mat-select placeholder="Select a service" [(ngModel)]="selectedService" required (change)="changeService($event.value)">
<mat-optgroup *ngFor="let serviceGroup of serviceGroups" [label]="serviceGroup.serviceGroupName">
<mat-option *ngFor="let service of serviceGroup?.services" [value]="service">
{{service?.serviceName}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
ngOnInit() {
this.serviceGroupService.serviceGroups.subscribe(sg => {});
this.selectedService.serviceId = this.bookingservicetime.serviceTime.service.serviceId;
this.selectedServiceTime = this.bookingservicetime.serviceTime;
}
service.ts
export class Service extends Base {
serviceId: number;
serviceName: string;
serviceDescription: string;
serviceGroupId: number;
tax: boolean;
commission: boolean;
onlineBooking: boolean;
serviceTimes: ServiceTime[];
blockedTimeBefore?: number;
blockedTimeAfter?: number;
staff: any[]; // Need to change to StaffService.
disabled: boolean;
}