[英]How can I update the next cell's value in ngx-datatable based on the selection of value in a dropdown?
I'm trying to update another cell value, in the first cell I have a dropdown, and based on the selection of value in dropdown, I have to update the values of dropdown in next column. 我正在尝试更新另一个单元格值,在第一个单元格中有一个下拉列表,根据下拉列表中的值选择,我必须在下一列中更新下拉列表的值。
How can I achieve this using ngx-datatable-columns? 如何使用ngx-datatable-columns实现此目标?
This is the cell that contains the dropdown: 这是包含下拉列表的单元格:
<ngx-datatable-column name="status" prop="operationStatus" >
<ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<select class="status" (change)="changeStatus($event, rowIndex)">
<option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
{{e.label}}
</option>
</select>
</ng-template>
</ngx-datatable-column>
This is the cell that needs to be updated: 这是需要更新的单元:
<ngx-datatable-column name="casette" prop="cassette1Bill">
<ng-template let-column="column" ngx-datatable-header-template>
<span>Kassette 1</span>
</ng-template>
<ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<div>{{value}}</div>
</ng-template>
</ngx-datatable-column>
Actually, you are already have the entire row's data at your disposal, since you are using let-row
on your columns. 实际上,由于在
let-row
上使用了let-row
,因此您已经可以使用整个行的数据。 Since you have assigned row
to let-row
, you can pass row
(which is an object containing that row data) to your (change)
event binding. 由于已将
row
分配给let-row
,因此可以将row
(包含该行数据的对象)传递到(change)
事件绑定。
On your .html file, simply make the following changes on that column with that dropdown: 在您的.html文件中,只需使用该下拉菜单在该列上进行以下更改:
<ngx-datatable-column name="status" prop="operationStatus" >
<ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<select class="status" (change)="changeStatus(row)">
<option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
{{e.label}}
</option>
</select>
</ng-template>
</ngx-datatable-column>
Basically, we have passed the row details row
to changeStatus()
基本上,我们已经将行详细信息
row
传递给changeStatus()
And on your component.ts, simply assign that value to the cassette1Bill
column 然后在您的component.ts上,只需将该值分配给
cassette1Bill
列即可
changeStatus(row) {
//console.log(row)
row.cassette1Bill = '22';
}
This should work. 这应该工作。 That column should reflect the updated values from that selected dropdown value.
该列应反映所选下拉值中的更新值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.