mat-select не показывает изначально выбранный элемент

Question

Я использую <mat-select-trigger> для отображения выбранных товаров - в этом случае способы оплаты:

<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, и я не понимаю, почему.

В constructor я инициализирую this.selectedPaymentMethod до

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

Но это просто не отображается. Я также пытался использовать [(ngModel)] вместо [(value)], но ни один из них не работает.

Что я здесь не так делаю?

Насколько я могу судить, я делаю это как это (Stackblitz), но по какой-то причине это просто не работает.

Answer 1

Непонятно почему, но выбранный элемент должен быть элементом вашего массива, например:

this.selectedPaymentMethod = this.paymentMethods[0];