对后台传入的数据，进行时间分类展示

一.思路

渲染效果：
//将相同的数据根据年月份分块渲染
2017年5月
121
10
11111
--------
121
12
222222
2018年10月
121
13
111113
--------
121
14
111114
情况：仿后台传入的数据

 test3=
    [
    
      {
        type:'121',
        merchantPresentIntegral: 10, 
        plateNumber: '111111', 
        createDate: '2018-05-31 17:58:35' ,
        test:'ajsdv had'
      },
     
      {
        type:'121',
        merchantPresentIntegral: 12, 
        plateNumber: '222222', 
        createDate: '2018-05-02 17:58:35' ,
        test:'ajsdv had'
      },
     
      {
        type:'121',
        merchantPresentIntegral: 13, 
        plateNumber: '111113', 
        createDate: '2018-10-31 17:58:35' ,
        test:'ajsdv had'
      },

  
      {
        type:'121',
        merchantPresentIntegral: 14, 
        plateNumber: '111114', 
        createDate: '2018-10-31 17:58:35' ,
        test:'ajsdv had'
      },
    
      {
        type:'121',
        merchantPresentIntegral: 155, 
        plateNumber: '111115', 
        createDate: '2018-07-31 17:58:35' ,
        test:'ajsdv had'
      },
    
      {
        type:'121',
        merchantPresentIntegral: 16, 
        plateNumber: '111116', 
        createDate: '2018-07-31 17:58:35' ,
        test:'ajsdv had'
      },
      {
        type:'121',
        merchantPresentIntegral: 17, 
        plateNumber: '111117', 
        createDate: '2018-08-31 17:58:35' ,
        test:'ajsdv had'
      },
      {
        type:'121',
        merchantPresentIntegral: 180, 
        plateNumber: '111118', 
        createDate: '2018-08-31 17:58:35' ,
        test:'ajsdv had'
      },
  ]

注：当后台数据转化为数组的数据太多，且渲染的数据只有其中的几个数据，则需要对原数据进行处理，这样使得结构更加清晰

。。。。
思路：
1.相同的数据全部归在一个年月份之下
即，创建数组：

				新数组=[
							{
							 createDate: '2018-05-31 17:58:35' ,
							 	location:[
											{
												type:'121',
										        merchantPresentIntegral: 10, 
										        plateNumber: '111111', 
											 }
												,
											{
												type:'121',
										        merchantPresentIntegral: 12, 
										        plateNumber: '222222', 
											 }
											]
							},
							{
								createDate: '2018-10-31 17:58:35' ,
							 	location:[
											{
												type:'121',
										        merchantPresentIntegral: 13, 
										        plateNumber: '1111113', 
											 }
											,
											{
												type:'121',
										        merchantPresentIntegral: 14, 
										        plateNumber: '1111114', 
											 }
											]
							}				
				]

2.创建数组后需要进行渲染，
—先渲染外面的年份，再渲染location里面的属性
—要用到双重循环

二.实现的代码

1.对后端传来的json数据做处理

 newData=[];
  getData(data){
    data.forEach((item,i) => {
      this.newData.push({
        type:item.type,
        merchantPresentIntegral:item.merchantPresentIntegral,
        createDate: item.createDate,
        plateNumber:item.plateNumber

      })
    });
    return this.newData;
  }

2.对处理后的数据进行格式限制，创建新数组，便于渲染

newArr=[];
TimeDetail(arr){
  // let newArr = []
      arr.forEach((item, i) => {
          let index = -1;
          let alreadyExists = this.newArr.some((newItem, j) => {      //通过some方法判断alreadyExists(判断新创建的数组是否存在的flag)，arr.some(...),当其括号里数据条件为true，则返回true，否则返回false
            console.log(item.createDate+'----------')
                if(this.setDate(item.createDate)   ===newItem.createDate  ) {
                  index = j
                  console.log(item.createDate+'---------'+newItem.createDate)
                  console.log(this.setDate(item.createDate)+'---------')
                  return true
              }
          })
          if(!alreadyExists) {             //如果不存在，则将此时的传入的原数组push到新数组中
            console.log("不存在的时候")
              this.newArr.push({
                  createDate:this.setDate( item.createDate),
                  location:
                  [
                    {
                      type:item.type,
                      merchantPresentIntegral:item.merchantPresentIntegral,
                      createDate: item.createDate,
                      plateNumber:item.plateNumber
                    }
                  ]
              })
          } else {                        //如果存在，且其中的时间相同，则将原数组中的除时间外的属性属性值追加到新数组的location数组中
              this.newArr[index].location.push({
                  type:item.type,
                  merchantPresentIntegral:item.merchantPresentIntegral,
                  createDate: item.createDate,
                  plateNumber:item.plateNumber
              })
          }
      }); 
      this.getSum();

}

3.对其中的时间进行格式化

  setDate(date){
      let newDate=new Date(date);
      let year=newDate.getFullYear().toString();
      let month=(newDate.getMonth()+1).toString();
      return year+'年'+month+'月';
    }

**注：**其中的假数据所选的时间必须符合常识和正确的，
eg:2018-06-31
//真实情况：6月并没有31号
//此时的setDate()的js代码会对其进行严格的处理，自动将其进到7月份

4.需要对其中的数据进行整合和计算，然后渲染(----可选----)

 sum=0;
    getSum(){
      for(let i=0;i<this.newArr.length;i++){
        for(let j=0;j<this.newArr[i].location.length;j++){
          this.sum=this.sum+parseInt(this.newArr[i].location[j].merchantPresentIntegral) ;
        }
        this.newArr[i]['sum']=this.sum;
          console.log(this.sum)
          this.sum=0;
      }   
    }

5.渲染的双重循环

<div  *ngFor="let item of  newArr">
	<p>{{ item.createDate }}</p>
	<div  *ngFor="let tip of  item.location"> //对其中的item的location数组进行循环
		<p>{{tip.plateNumber}}</p>
		<p>{{tip.type}}</p>
		<p>{{tip.type}}</p>
	</div>
</div>