Установка значения углового коврика

Question

Я не могу установить выбранное значение раскрывающегося списка.У меня есть компонент для добавления сервисов, и я использую тот же компонент для отображения сервисов, которые уже были добавлены.Я попытался использовать NgModel и указать service.serviceId в качестве значения, но он никогда не появляется в раскрывающемся списке, как выбрано.Как я могу использовать этот компонент, чтобы позволить пользователю выбирать службы, а также вручную устанавливать отображаемую услугу, используя данные из bookingServiceTime в качестве предварительно установленного выбранного значения.Ценю любую помощь.Спасибо.

     <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;
}

Answer 1

Я думаю, вам нужно связать

   <mat-option *ngFor="let service of serviceGroup?.services" [value]="service.serviceName">
                {{service?.serviceName}}
   </mat-option>