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

Question

我现在正在我的应用程序中实现 ng2-smart-table。我想在 table 下方显示 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 信息，在主要 table 上监听数据更新并更新页脚组件。

在你的html

<ng2-smart-table #grid

在你的组件上

@ViewChild('grid')
table;

订阅来自 smart-table

的 on changed source observable

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

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

How can I implement table footer of ng2-smart-table?

ng2-smart-table

angular