Блог

У меня есть две таблицы полностью Table1 и table2. Таблица1 заполнена данными из сервиса. В таблице 1 у меня есть такие столбцы, как кол-во, Цена и флажок. В столбцах с флажками у меня есть флажки в качестве значений. Кол-во и цена имеют число в качестве значений в table2 У меня есть столбцы с именами Кол-во и цена

Фотографии таблиц 1 и 2

Теперь скажите, если я нажму флажок в строке 1,2,4 в table1. Поэтому, если вы возьмете столбец Qty в table1, все значения Qty в строке 1,2,4 должны быть добавлены и отображаться в столбце qty в table2 как одно значение. То же самое касается столбца цены. (Пример 6,4,2 — это значения столбца qty в строке 1,2,4, поэтому добавьте (6 4 2 ) и показать общее количество в первой строке столбца кол-во в таблице 2

Я пытаюсь сделать это в течение двух дней, не мог найти решение.Я знаю, что это очень сложно. Пожалуйста, помогите мне, если сможете.

STACKBLITZ: https://stackblitz.com/edit/angular-ivy-coydaf?file=src/app/app.component.ts

Добавьте переменную на уровне компонента, которая будет содержать общее количество.

 totalCount: any;
 

Инициализируйте его в ngOnInit событии.

 this.totalCount = {qty:0,value:0};
 

при onChange событии флажка вызовите приведенную ниже функцию, которая будет добавлять / вычитаться на основе проверенного статуса.

 getTotal(event,item) {
    if (event.target.checked) {
      this.totalCount.qty =  this.totalCount.qty   item.qty;
      this.totalCount.value =  this.totalCount.value   item.value;
    } else {
      this.totalCount.qty =  this.totalCount.qty - item.qty;
      this.totalCount.value =  this.totalCount.value - item.value;
    }
}
 

Отобразите значение следующим образом.

 <tr *ngIf="!(totalCount.qty == 0 || totalCount.value == 0)">
    <td>1</td>
    <td>{{totalCount.qty}}</td>
    <td>{{totalCount.value}}</td>
</tr>
 

Работает StackBlitz:-

https://stackblitz.com/edit/angular-ivy-349pwn?file=src/app/app.component.html