ng2-smart-table:从自定义renderComponent计算其他列值

Question

我已经为代码创建了一个stackblitz。

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

这是ng2-smart-table特有的问题。

Answer 1

您应该使用LocalDataSource作为源，这样您就可以告诉ng2- 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