在角材质下拉列表中预选一个值

Question

我是angular的新手。在HTML表单上，用户可以选择下拉列表值，我需要在一个角表中显示该值。我像这样显示这个值:

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

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

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>

下拉列表显示在表格中，但是我不知道如何在下拉列表中显示选中的值。我刚刚用这条语句输入了值:

element.PaymentMethodName

任何帮助都将不胜感激。

Answer 1

从下拉列表中选择一个初始项使用以下语法:

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

在TS代码中,选择数组项如下:

mySelection = this.myList[1].value; 

其中myList声明如下(或使用组件中已有的数据源):

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

这将用check项初始化下拉列表。

在您的表示例中，仅传递表row元素的值。PaymentMethodName作为垫选择中的初始值，如我上面所示。

然后你的下拉菜单被声明为:

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