在 angular material 下拉列表中预选一个值

Question

我是 angular 的新手。在 HTML 表单上，用户可以 select 下拉列表值，我需要在 angular table 中显示该值。我像这样显示该值：

<ng-container matColumnDef="PaymentMethodName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Payment Method</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.PaymentMethodName}} </mat-cell>
  </ng-container>

现在，我被要求在 table 中显示具有预先 select 值的整个下拉列表，所以我尝试这样做：

ng-container matColumnDef="PaymentMethodName">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Payment Method</mat-header-cell>
                  <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never" appearance="outline" [style.width.px]=150>
                      <mat-select placeholder="Payment Type" [(ngModel)]="SelectedMailItem.PaymentMethod" name="paymentType" (change)="ClearAmount(SelectedMailItem)">
                        <mat-option *ngFor="let paymentType of Picklist.PaymentMethods" [value]="paymentType">
                          {{paymentType.Name}}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>

                  </mat-cell>
                </ng-container>

table 中显示了下拉菜单，但我不知道如何在下拉菜单中显示所选的值。我之前只是用这个声明来表达价值：

element.PaymentMethodName

任何帮助将不胜感激。

Answer 1

到 select 下拉列表中的初始项目使用以下语法：

<mat-select [(value)]="mySelection">
..

在你的TS代码中，select数组项如下：

mySelection = this.myList[1].value;

其中 myList 声明如下（或使用组件中预先存在的数据源）：

myList: MyPaymentList[] = [
    {value: '1', viewValue: 'Cash'},
    {value: '2', viewValue: 'Credit'},
    {value: '3', viewValue: 'Cheque'}
];

这将使用 Cheque 项目初始化下拉列表。

在您的 table 示例中，只需将 table 行中的值 element.PaymentMethodName 作为 mat-select 如上所示。

然后您的下拉列表声明为：

<mat-select placeholder="Payment Type" 
    [(ngModel)]="SelectedMailItem.PaymentMethod" name="paymentType" 
    (change)="ClearAmount(SelectedMailItem)"
    [(value)]="element.PaymentMethodName">

在 angular material 下拉列表中预选一个值

preselecting a value in angular material dropdown

drop-down-menu

typescript

angular-material

angular