mat-select not showing initially selected item

Question

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>

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

In the constructor I am initializing this.selectedPaymentMethod to

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

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

What am I doing wrong here?

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

Answer 1

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

this.selectedPaymentMethod = this.paymentMethods[0];