<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 文件中，我设置了这样的值，但它的 mat select 元素未设置为 selected 值。

    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 不匹配。

<mat-select> 选定的值设置但未显示

<mat-select> selected value setting but it is not showing

angular

typescript

angular-material

angular-reactive-forms

angular-forms