垫选择不显示最初选择的项目 [英] mat-select not showing initially selected item

问题描述

我正在使用<mat-select-trigger>来显示选定的项目-在这种情况下为付款方式:

I'm using <mat-select-trigger> in order to display selected items - in this case payment methods:

<div style="padding-top: 24px;">
  <mat-form-field style="width: 100%;">
    <mat-select placeholder="Zahlungsmethode" [(value)]="selectedPaymentMethod">

      <mat-select-trigger>
        <div style="display: flex; align-items: center;">
          <img [src]="selectedPaymentMethod.imageUrl" style="align-self: center; margin: 0 8px;">
          <span>{{selectedPaymentMethod.displayText}}</span>
        </div>
      </mat-select-trigger>

      <mat-option *ngFor="let pm of paymentMethods" [value]="pm">
        <div style="display: flex; align-items: center;">
          <img [src]="pm.imageUrl" style="align-self: center; margin: 0 8px;">
          <span>{{pm.displayText}}</span>
        </div>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

我的问题是mat-select似乎不能反映初始值，我也不明白为什么.

My problem is that the initial value seems not to be reflected by the mat-select and I don't understand why.

在constructor中，我将this.selectedPaymentMethod初始化为

if (this.currentSubscription != null) {
  this.paymentMethod = data.currentSubscription.paymentMethod;
  this.selectedPaymentMethod = this.paymentMethod;
}

但是它根本不显示.我还尝试使用[(ngModel)]代替[(value)]，但是它们都不起作用.

But it is simply not displayed. I've also tried to used [(ngModel)] instead of [(value)] but none of them works.

我在做什么错了?

据我所知，我正在像

As far as I can tell I am doing it like this (Stackblitz) but for some reason it's just not working here.

推荐答案

目前尚不清楚为什么，但是所选项目应该是数组中的项目，例如:

It is unclear why but the selected item should be an item of your array for example:

this.selectedPaymentMethod = this.paymentMethods[0]; 

这篇关于垫选择不显示最初选择的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！