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

Posted 2023-03-13

【中文标题】<mat-select> 选择值设置，但未显示

【英文标题】：<mat-select> selected value setting but it is not showing

【发布时间】：2021-06-17 14:40:24

【问题描述】：

我有一个这样的父组件。

         <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 元素没有设置为选定的值。

    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 .

【参考方案1】：

要使选择自动进行，通过ngModel 传递的值必须与选项的value 匹配。

所以，我猜selectedTimeZone.displayName 与绑定到您的选项的任何timezone.id 都不匹配。

【讨论】：

成功了！谢谢@Francesco Colamonici