如何实现 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 source observable

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