我有一个显示项目列表的表格。此表使用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启动或更改时,函数都会被列表中的所有项触发。
我一直在打破这个问题。希望有人有解决方案,可以帮助我。
谢谢!
答案 0 :(得分: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>
.....
.....