typescript - förval av ett värde i Angular Material-dropdown

Jag är ny på Angular. På HTML-formuläret kan användare välja värdet från rullgardinslistan och jag behöver visa det värdet i en Angular-tabell. Jag visar det värdet på följande sätt:

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

Nu blir jag ombedd att visa hela rullgardinsmenyn i tabellen som har förvalt värde, så jag försökte göra detta:

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>

Rullgardinsmenyn visas i tabellen, men jag vet inte hur man visar det valda värdet i rullgardinsmenyn. Jag visade bara värdet med detta uttalande tidigare:

element.PaymentMethodName

all hjälp kommer att uppskattas.

Svar #1

För att välja ett initialt objekt från rullgardinslistan, använd följande syntax:

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

I din TS-kod, välj arrayobjektet på följande sätt:

mySelection = this.myList[1].value; 

Där myList deklareras som följer (eller använd en befintlig datakälla inom din komponent):

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

Detta kommer att initiera rullgardinsmenyn med Check-objektet.

I ditt tablexempel, bara skicka värdet från din tabellrad element.PaymentMethodName som startvärde i mat-select som jag visade ovan.

Då deklareras din rullgardinsmeny som:

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