Question

我有一个显示项目列表的表格。此表使用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在（更改）事件上运行方法。我理解ngModel，当我将其更新为[（ngModel）] =＆＃34; newTrade.Status.ID＆＃34;和[value] =＆＃34; status.ID＆＃34;我知道我可以使用（ngModelChange）=＆＃34; setStatusID（status.value）＆＃34;从事件处理程序中获取ID。但是，当我进行这些更改时，单击表中的“编辑”图标会导致在表单初始化时不选择该项。（单击“编辑”图标将运行一种方法，以显示从表中传递项目的表单。）

在另一种情况下使用mat-autocomplete我可以添加（onSelectionChange）=＆＃34; setStatusID（status.ID）＆＃34;到mat-option元素，但这似乎不适用于mat-select，因为每次mat-select启动或更改时，函数都会被列表中的所有项触发。

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

谢谢！

Answer 1

可能会有所帮助

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

如何使用ngModel从mat-select / mat-option中选择ID

1 个答案: