Как динамически отображать сумму данных выбранных строк на Angular?

Question

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

Я думал, что ngOnInit() позволит мне достичь этого, однако сумма данных выбранного столбца не меняется.

totalWeight = 0;

  ngOnInit(): void{
    this.selection.selected.forEach((element) => {
      this.totalWeight += element.weight;
    });
  }

Вот DEMO на Stackblitz.

Answer 1

Хотя люди уже объяснили, в чем реальная проблема, и на вопрос уже был дан ответ, я хочу показать вам, как вы можете сделать это с помощью реактивного подхода:

TS :

readonly totalWeights$ = this.selection.changed.pipe(
  map(() => this.selection.selected.reduce((acc, value) => acc + value.weight, 0)),
  startWith(0)
);

HTML :

<p>Total selected weight: {{ totalWeights$ | async }}</p>

РАБОЧИЙ ДЕМО

Answer 2

Вы должны использовать событие changed API SelectionModel, которое возвращает событие SelectionChange, генерируемое при изменении выбора, вместо переменной selected API SelectionModel.

Интерфейс SelectionChange имеет следующие свойства (взятые из исходного кода):

/**
 * Event emitted when the value of a MatSelectionModel has changed.
 * @docs-private
 */
export interface SelectionChange<T> {
  /** Model that dispatched the event. */
  source: SelectionModel<T>;
  /** Options that were added to the model. */
  added: T[];
  /** Options that were removed from the model. */
  removed: T[];
}

Затем можно добавить или удалить вес из свойства totalWeight следующим образом:

totalWeight = 0;

ngOnInit(): void{
  this.selection.changed.subscribe(change => {
      console.log('Added items:', change.added);
      console.log('Removed items:', change.removed);
      console.log('Source selection model:', change.source);
      change.added.forEach(element => {
          this.totalWeight += element.weight;
      })
      change.removed.forEach(element => {
          this.totalWeight -= element.weight;
      })
  });
}

Обновленная демоверсия

Answer 3

Вам необходимо вычислять сумму каждый раз, когда изменяется значение флажка,

 calculate(row?: PeriodicElement)
  {
    this.totalWeight = 0;
    this.selection.selected.forEach((element) => {
      this.totalWeight += element.weight;
    });
  }

STACKBLITZ DEMO

Answer 4

Прежде всего, определите обработчик для вычисления суммы каждого веса (с именем changeEvent ):

<mat-checkbox (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null;changeEvent(row)"
                [checked]="selection.isSelected(row)"
                [aria-label]="checkboxLabel(row)">

Затем в своем TS, используя reduce, вы можете сделать:

public changeEvent(row?: PeriodicElement){
  this.totalWeight = 0;
  this.totalWeight = this.selection.selected.reduce((prev, cur)=>{
   return prev + cur.weight;
  }, 0);
}