У меня есть две таблицы полностью Table1 и table2. Table1 заполняется данными из сервиса. В таблице 1 у меня есть такие столбцы, как количество, цена и флажок. В столбцах флажков у меня есть флажки в качестве значений. Количество и цена имеют число как значения В таблице 2 у меня есть столбцы с именами Кол-во и Цена.
Фото таблицы 1 и 2
Теперь скажем, если я щелкну флажок в строке 1,2,4 в таблице 1. Поэтому, если вы возьмете столбец Qty в таблице 1, все значения Qty в строке 1,2,4 должны быть добавлены и показаны в столбце количества в таблице 2 как одно значение. То же самое касается столбца цены. (Пример 6,4,2 - это значения столбца количества в строке 1,2,4, поэтому добавьте (6+4+2) и покажите итог в первой строке столбца количества в таблице2.
Я пытаюсь сделать это в течение двух дней, но не могу найти решение. Я знаю, что это очень сложно. Пожалуйста, помогите мне, если вы можете.
STACKBLITZ: https://stackblitz.com/edit/angular-ivy-coydaf?file=src%2Fapp%2Fapp.component.ts
🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.
Добавьте переменную на уровне компонента, которая будет содержать общее количество.
totalCount: any;
Инициализируйте его в событии ngOnInit.
this.totalCount = {qty:0,value:0};
в событии Checkbox 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>
Рабочий стекBlitz: -
https://stackblitz.com/edit/angular-ivy-349pwn?file=src%2Fapp%2Fapp.component.html