Question

我有一个数组是水果：任何[]，并通过网格显示在前端看起来像这样 +ID----+Name------+Value+ |0 |Apple | 4| |1 |Orange | 1| |2 |Banana | 3| |1 |Orange | 3| |0 |Apple | 1| +------+----------+-----+ 我需要这样的结果 +ID----+Name----+Value+ |0 |Apple | 5| |1 |Orange | 4| |2 |Banana | 3| +------+--------+-----+ 我的意思是，我可以使用后端来实现这一点，但是我正在提取大量数据，这些数据需要一些时间才能生成。这是一个报告项目，有两种类型，详细和概述。我只是想在生成详细数据时，我已经有了汇总数据，然后，如果可能的话，为什么不在前端进行呢。我希望有人能帮助我。

Answer 1

使用它，让我知道它是否对您有用

 newFruit:any[]=[];

     fruit:any[]=[
       {
         id:0,
         name:"A",
         value:2
       },
       {
         id:1,
         name:"B",
         value:2
       },
        {
         id:1,
         name:"B",
         value:3
       },
       {
         id:0,
         name:"A",
         value:3
       }
     ]
      ngOnInit()
      {
        this.fruit.forEach(f=>{
            let d=this.newFruit.find(x=>{
              if(x.id==f.id)
              return true;
            })
            if(d)
            {
              d.value+=f.value;
            }
            else
            {
              this.newFruit.push(f);
            }
        })
      }

Answer 2

创建一个用于汇总或预处理您的数据并在组件中使用该服务的服务。

假设您具有从服务器接收的以下数据：

fruit = [
    {
      id:0,
      name:"Apple",
      value:4
    },
    {
      id:1,
      name:"Orange",
      value:1
    },
     {
      id:2,
      name:"Banana",
      value:3
    },
    {
      id:1,
      name:"Orange",
      value:3
    },
    {
      id:0,
      name:"Apple",
      value:1
    }
  ];

例如创建服务

Preprocess.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PreprocessService {

  aggregatedFruits: any = {};
  constructor() {}


  /**
  * takes list of fruits and keep  aggregated data in aggregatedFruits variable
  */
  summarize(fruitList: any[]) :any {
    fruitList.forEach(el => {
      if(!this.aggregatedFruits[el.id]) {
        this.aggregatedFruits[el.id] = el
      } else {
        this.aggregatedFruits[el.id].value += el.value
      }
    });
    return this.aggregatedFruits
  }
}

然后在您的组件中

Your.component.ts

import { Component, OnInit } from '@angular/core';
import { PreprocessService } from './Preprocess.service';
.
.
.
  constructor(public preprocessService: PreprocessService) { }

  aggFruits: any;

  ngOnInit() {
    this.aggFruits = this.preprocessService.summarize(fruit);
    console.log(this.aggFruits);
  }
.
.
.

为预处理数据创建单独的服务的好处是您可以扩展其功能，并且不会因与处理用户界面无关的代码而使组件混乱。

Angular 6/7从any（any []）

2 个答案: