0

我有一个显示项目列表的表格。该表使用 ngModel 进行数据绑定，因此我可以在同一页面上编辑表单中的项目。

表单有一个动态填充的 mat-select 组件。

桌子：

<mat-table #table [dataSource]="trades" matSort>
    .....
    .....
    <ng-container matColumnDef="Status">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
        <mat-cell *matCellDef="let trade">{{trade.Status.Title}}</mat-cell>
    </ng-container>
    .....
    .....
    <ng-container matColumnDef="editTradeIcon">
        <mat-header-cell *matHeaderCellDef><mat-icon>mode_edit</mat-icon></mat-header-cell>
        <mat-cell *matCellDef="let trade"><mat-icon (click)="showTradeForm( trade )">mode_edit</mat-icon></mat-cell>
    </ng-container>
    .....
    .....
</mat-table>

表格：

<form>
    .....
    .....
    <mat-form-field>
        <mat-select placeholder="Status" name="Status" #status [(ngModel)]="newTrade.Status.Title">
            <mat-option *ngFor="let status of statuses" [value]="status.Title">
                {{status.Title}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    .....
    .....
</form>

我想使用所选项目的 ID 在 (change) 事件上运行一个方法。我了解 ngModel，当我将其更新为 [(ngModel)]="newTrade.Status.ID" 和 [value]="status.ID" 我知道我可以使用 (ngModelChange)= 从事件处理程序中获取 ID “setStatusID（状态。值）”。但是，当我进行这些更改时，单击表中的编辑图标会导致在表单初始化时未选择项目。（单击编辑图标会运行一个方法来显示表单从表中传递项目。）

在另一种情况下使用 mat-autocomplete 我可以将 (onSelectionChange)="setStatusID(status.ID)" 添加到 mat-option 元素，但这似乎不适用于 mat-select，因为该函数会针对中的所有项目触发每次 mat-select 启动或更改时的列表。

我一直在努力解决这个问题。希望有人有解决方案，可以帮助我。

谢谢！

4

1 回答 1

0

可能这会有所帮助

  <form>
.....
.....
<mat-form-field>
    <mat-select  (change)="onChnage(status)" placeholder="Status" name="Status" #status [(ngModel)]="newTrade.Status.Title">
        <mat-option *ngFor="let status of statuses" [value]="status.ID">
            {{status.Title}}
        </mat-option>
    </mat-select>
</mat-form-field>
.....
.....

于 2018-02-15T17:50:29.457 回答