如何使用 *ngONinit 将 5 个差异列的值汇总为 TOTAL？

Question

我有一个产品数组，其中包含字段名称 ID、品牌、价格、QtySold、Value，其中 value=Price*qtySold，最后我需要显示商品数量、销售总量和总销售额

 @Component
({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
 }`
export class AppComponent{
allProduct:Product[]=[
{Id:'P104', Brand:'Pepsi',Price:4,qtySold:22},
{Id:'C124', Brand:'Coke',Price:4,qtySold:26},
{Id:'M155', Brand:'Maggie',Price:6,qtySold:10},
{Id:'DM241', Brand:'Cadburys',Price:10,qtySold:15},
{Id:'5S118', Brand:'5 Star',Price:8,qtySold:8},
];

需要显示产品数量、销售数量总和和销售额总和

Answer 1

您的 ngOninit

中需要如下内容

let products = [
  {
    "Id": "P104",
    "Brand": "Pepsi",
    "Price": 4,
    "qtySold": 22
  },
  {
    "Id": "C124",
    "Brand": "Coke",
    "Price": 4,
    "qtySold": 26
  },
  {
    "Id": "M155",
    "Brand": "Maggie",
    "Price": 6,
    "qtySold": 10
  },
  {
    "Id": "DM241",
    "Brand": "Cadburys",
    "Price": 10,
    "qtySold": 15
  },
  {
    "Id": "5S118",
    "Brand": "5 Star",
    "Price": 8,
    "qtySold": 8
  }
];

let productsCount = products.length;
let qtySold = products.reduce((a, b) => +a + +b.qtySold, 0);
let sales = products.reduce((a, b) => +a + +b.Price, 0);

console.log(productsCount);
console.log(qtySold);
console.log(sales);

STACKBLITZ DEMO

Answer 2

要么像@Sajeetharan 发布的那样简单地减少，要么使用像 lodash 这样的实用程序库：

this.numberOfProducts = allProduct.length;
this.sumQtySold = _.sumBy(allProduct, product => product.qtySold);
this.sales = _.sumBy(allProduct, product => product.qtySold * product.price);

Answer 3

实现此目的的另一种方法：

const beverageSales = [
  {
    "Id": "P104",
    "Brand": "Pepsi",
    "Price": 4,
    "qtySold": 22
  },
  {
    "Id": "C124",
    "Brand": "Coke",
    "Price": 4,
    "qtySold": 26
  },
  {
    "Id": "M155",
    "Brand": "Maggie",
    "Price": 6,
    "qtySold": 10
  },
  {
    "Id": "DM241",
    "Brand": "Cadburys",
    "Price": 10,
    "qtySold": 15
  },
  {
    "Id": "5S118",
    "Brand": "5 Star",
    "Price": 8,
    "qtySold": 8
  }
];

let itemsSold = 0;
let quantitySold = 0;
let netSales = 0;

beverageSales.forEach(sale => {
  itemsSold += 1;
  quantitySold += sale.qtySold;
  netSales += sale.Price * sale.qtySold;
});

console.log('items sold', itemsSold);
console.log('quantity sold', quantitySold);
console.log('net sales', netSales);

Answer 4

productCount : number=0;
quantitySold : number=0;
sales : number=0;
sold : number=0;
ngOnInit(){
for(let temp of this.allProduct){
this.productCount += 1;
this.quantitySold += temp.qtySold;
this.sales += temp.Price * temp.qtySold;
if(temp.qtySold>0){
this.sold += 1;
}}}

以上适用于 me.It 的代码仅通过使用循环而不使用其他术语来汇总值。

如何使用 *ngONinit 将 5 个差异列的值汇总为 TOTAL？

How to Sum up the values of 5 diff columns as TOTAL using *ngONinit?

javascript

ngoninit

angular