En mi aplicación, tengo un mat-form-field con una mat- mat- option. Quiero que se abra un cuadro de diálogo cuando selecciono un elemento de mat-option . Aquí está mi código. En este momento, cuando selecciono un elemento, no pasa nada. ¿Qué tengo que hacer?
HTML:
<ng-container matColumnDef="Order"> <th mat-header-cell *matHeaderCellDef width="10%"> Sipariş No </th> <td mat-cell *matCellDef="let row; let i = index"> <span *ngIf="EditIndex != i">{{row.Order?.Subject}}</span> <mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p" style="min-width: 100px !important;"> <mat-select [(ngModel)]="row.Order" required name="Order" (selectionChange)="updateProducts($event.value)" style="min-width: 100px !important;"> <mat-select-trigger> {{row?.Order?.Reference}} </mat-select-trigger> <mat-option *ngFor="let order of originalSupplierOrders" [value]="order"> {{order.Reference + ' - ' + order.Subject}} </mat-option> </mat-select> </mat-form-field> </td> </ng-container>TS:
openSelectedOrderProductList(prm) { const dialogRef = this._dialog.open(SelectedOrderProductListDialogComponent, { width: "700px", data: prm, }); dialogRef.afterClosed().subscribe((result) => { //console.log(result); }); }Debe activar la selección Cambiar para abrir el cuadro de diálogo. Agregue la "función openSelectedOrderProductList()" a (selectionChange).
HTML:
<ng-container matColumnDef="Order"> <th mat-header-cell *matHeaderCellDef width="10%"> Sipariş No </th> <td mat-cell *matCellDef="let row; let i = index"> <span *ngIf="EditIndex != i">{{row.Order?.Subject}}</span> <mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p" style="min-width: 100px !important;"> <mat-select [(ngModel)]="row.Order" required name="Order" (selectionChange)="updateProducts($event.value);openSelectedOrderProductListfunction()" style="min-width: 100px !important;"> <mat-select-trigger> {{row?.Order?.Reference}} </mat-select-trigger> <mat-option *ngFor="let order of originalSupplierOrders" [value]="order"> {{order.Reference + ' - ' + order.Subject}} </mat-option> </mat-select> </mat-form-field> </td>