Soy nuevo en angular. En el formulario HTML, los usuarios pueden seleccionar el valor de la lista desplegable y necesito mostrar ese valor en una tabla angular. Estoy mostrando ese valor así:
<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>Ahora, se me pide que muestre todo el menú desplegable en la tabla que tiene un valor preseleccionado, así que intenté hacer esto:
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>El menú desplegable se muestra en la tabla, pero no sé cómo mostrar el valor seleccionado en el menú desplegable. Estaba mostrando solo el valor con esta declaración antes:
element.PaymentMethodNamecualquier ayuda será apreciada.
Para seleccionar un elemento inicial de la lista desplegable, use la siguiente sintaxis:
<mat-select [(value)]="mySelection"> ..En su código TS, seleccione el elemento de matriz de la siguiente manera:
mySelection = this.myList[1].value;Donde myList se declara de la siguiente manera (o usa una fuente de datos preexistente dentro de tu componente):
myList: MyPaymentList[] = [ {value: '1', viewValue: 'Cash'}, {value: '2', viewValue: 'Credit'}, {value: '3', viewValue: 'Cheque'} ];Esto inicializará el menú desplegable con el elemento Comprobar .
En su ejemplo de tabla, simplemente pase el valor del elemento de fila de su tabla.PaymentMethodName como el valor inicial en la selección de tapete como mostré arriba.
Entonces su menú desplegable se declara como:
<mat-select placeholder="Payment Type" [(ngModel)]="SelectedMailItem.PaymentMethod" name="paymentType" (change)="ClearAmount(SelectedMailItem)" [(value)]="element.PaymentMethodName">