ng2-smart-table:从自定义渲染组件中计算其他列值

Question

我为代码创建了一个堆栈闪电战。

我想在更改Quantity时更新Total列的值。在自定义组件中，当我更新数据中的total时，在更新数据时，它不会在 UI 中更新(我可以在控制台中看到它(。

这是ng2-smart-table的具体问题。

Answer 1

你应该使用LocalDataSource作为源，以便你可以告诉 ng2-table 某些内容已被更改，并且它应该刷新数据source.refresh()

app.component.ts 中的更改

source: LocalDataSource;

设置更改

quantity: {
title: 'Quantity',
type: 'custom',
renderComponent: CustomComponent,
sort: false,
editable: true,
onComponentInitFunction: (instance: any) => {
instance.save.subscribe(row => {
this.source.refresh();
});
}
},

在custom.compnent.ts中的更改

export class CustomComponent {
rowData: any;
@Output() save: EventEmitter<any> = new EventEmitter();
onModelChange(table) {
this.rowData.total = this.rowData.amount * this.rowData.price;
this.save.emit(this.rowData);
}
}

工作演示在这里 - https://stackblitz.com/edit/ng2-smart-table-column-cal-m9nxpg