<mat-select>选择了值设置但未显示

Question

我有一个像这样的父组件。

         <form [formGroup]="validateFormGroup">
          <div>
            <mat-form-field>
              <input matInput placeholder="Name" maxlength="150" formControlName="name" required>
            </mat-form-field>
          </div>
          </form>
          <div class="">
            <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones>
          </div>
       

在 app-calendar-time-zones 组件中，这是我的 HTML 代码

    <div class="calendar-container">
            <mat-form-field>
    <mat-label>Select time zone</mat-label>
    <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control'  >

      <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id"
                  (click)="timeZoneSelected(timezone)">
        {{timezone.offset + ' ' + timezone.displayName}}
      </mat-option>

    </mat-select>
  </mat-form-field>
      
    </div>

在子组件 Ts 文件中，我正在设置这样的值，但其垫选择元素未设置为所选值。

    this.selectedTimeZone = this.filteredTimeZones[0];

    //  selectedTimeZone  i am getting here is this ==  {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""}

显示以下空下拉列表。但是，如果我单击下拉图标，我就可以看到所有选项。

and in the browser if i inspect mat-select element. ngModel value is setting .

Answer 1

要自动选择，通过

ngModel

传递的值必须与选项的

value

匹配。

所以，我猜

selectedTimeZone.displayName

与绑定到您的选项的任何

timezone.id

都不匹配。

Answer 2

这对我有用

    <mat-form-field>
         <mat-label for="">Doctor Name</mat-label>
         <mat-select [(ngModel)]="patientInfo.doctorName">
           <mat-option value="" selected></mat-option>
           @for (doctor of doctorsList(); track doctor) {
           <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option>
          }
         </mat-select>
    </mat-form-field>