Как я могу реализовать нижний колонтитул таблицы ng2-smart-table?

Сейчас я внедряю 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;
    });
  }

Это тег ng2-smart-table, который я использовал в HTML.

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

angular ng2-smart-table
person iPatz    schedule 17.06.2017    source источник
comment
создать для него отдельный компонент   -  person Sajeetharan    schedule 17.06.2017
comment
Это зависит от того, как вы храните данные, но функция reduce, вероятно, будет соответствовать тому, что вы хотите. Если вы предоставите код, я смогу лучше помочь/объяснить.   -  person MichaelSolati    schedule 17.06.2017
comment
@MichaelSolati Я уже добавил фрагмент кода выше, спасибо :)   -  person iPatz    schedule 18.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я бы создал отдельный компонент, чтобы отображать нужную информацию о сумме, прослушивать обновления данных в основной таблице и обновлять компонент нижнего колонтитула.

На вашем html

<ng2-smart-table #grid

На вашем компоненте

@ViewChild('grid')
table;

Подпишитесь на измененный источник, наблюдаемый из смарт-таблицы

ngAfterViewInit(): void {
    this.table.grid.source.onChangedSource.subscribe(() => {
        // update other component with the SUM
    });
}
person hamilton.lima    schedule 21.06.2017
comment
Спасибо @hamilton.lima за ваш ответ. Теперь я создал еще один раздел в качестве нижнего колонтитула для обобщения информации. - person iPatz; 23.06.2017
comment
Я пробовал, как указано выше, но у меня это не сработало. Показывает ошибку в сетке this.table.grid.source неопределенного значения. Не могли бы вы обновить свой код с помощью какого-нибудь четкого примера. - person Vinoth Kumar; 28.02.2019