选择选项时打开对话框的角度答案

【问题标题】：Angular Opening a Dialog when an option is selected选择选项时打开对话框的角度
【发布时间】：2021-11-29 03:11:54
【问题描述】：

在我的应用程序中，我有一个 mat-form-field 和一个 mat- option. 我希望在从 mat-option 中选择一个元素时打开一个对话框。这是我的代码。现在，当我选择一个元素时，什么也没有发生。我该怎么办？

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);
    });
}

【问题讨论】：

我建议你使用valueChanges，检查这个答案stackoverflow.com/a/69507405/5536695，里面subscribe你可以打开你的对话框
好的，但是如果它没有 formGroup 指令怎么办？那我应该用什么？我编辑了我的问题。
你可以使用selectionChange事件
非常感谢
很高兴为您提供帮助，您可以接受我的回答。

标签： javascript html angular typescript

【解决方案1】：

您需要触发 selectionChange 以打开对话框。将“openSelectedOrderProductListfunction()”添加到 (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>

【讨论】：

【解决方案2】：

如果你使用 Reactive 表单，我建议你使用valueChanges，你可以参考这个answer。

否则，您可以使用 selectionChange 事件 <mat-select>

【讨论】：