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

问题描述

我使用 来显示选定的项目 - 在这种情况下付款方式:

<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>
</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>

</mat-option></mat-select></mat-form-field>

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

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

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

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

我在这里做错了什么?

据我所知，我正在这样做 this (Stackblitz) 但由于某种原因它在这里不起作用.

解决方案

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

this.selectedPaymentMethod = this.paymentMethods[0];

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.

解决方案

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

this.selectedPaymentMethod = this.paymentMethods[0]; 

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