如何实现ng2-smart-table的表格页脚？

Question

我现在正在我的应用程序中实现ng2-smart-table。我想在表格下方显示表格页脚，以获取额外信息，例如总金额，折扣金额等。

这是我在打字稿文件中的代码

settings = {
    columns: {
      seq: {
        title: '#',
        editable: false,
        width: '10%'
      },
      productName: {
        title: 'Product Name',
        editable: false
      },
      qty: {
        title: 'Qty.',
        width: '10%'
      },
      uom: {
        title: 'Uom',
        width: '10%'
      },
      price: {
        title: 'Price',
        valuePrepareFunction: (price) => {
          var formatted = this.thbCurrencyPipe.transform(price, 2);
          return formatted;
        }
      },
      discount: {
        title: 'Disc.'
      },
      amount: {
        title: 'Amount'
      }
    }
  };

我在ngOnInit()方法

中加载数据

ngOnInit() {
    this._utilityService.LoadPosDummyData().subscribe(data => {
      console.log(data);
      this.datas = data;
    });
  }

这是我在Html中使用的ng2-smart-table标记

<ng2-smart-table [settings]="settings" [source]="datas"></ng2-smart-table>

Answer 1

我会创建一个单独的组件来显示所需的Sum信息，在主表上监听数据更新并更新页脚组件。

在你的HTML上

<ng2-smart-table #grid

在您的组件上

@ViewChild('grid')
table;

从智能表

订阅on changed sources observable

ngAfterViewInit(): void {
    this.table.grid.source.onChangedSource.subscribe(() => {
        // update other component with the SUM
    });
}