Question

我有这个聚合函数，它返回一个对象数组。

app.get('/someapi', function (req, res) {
    someapi.aggregate([
        {
            "$group": {
                "_id": "$type",
                "count": { "$sum": 1 },                    
            }
        }
    ], function (err, result) {
        console.log(result);
        res.json(result);
    });
});

对象数组如下：

[{_id: electronics count: 200}, {_id: household count: 150}, {_id: clothes count: 500}...]

我有一个集合，其中包含聚合函数适用的数据。数据看起来像这样：

[{_id: ObjectID type:electronics } {_id: ObjectID type: household}, {_id: clothes: count: 500}...]

我有一个组件将用于在垫子桌子上显示数据

  export class someComponent {  

  displayedColumns: string[] = ['type','count'];
  dataSource      : data[] = [];
         getFunction() {
            this.getFunction.get().subscribe(data => {
              this.typeArr = data['type'];//gets the collection data array
              this.countArr = data['result']; //gets the aggregate function array

              //iterates and pushes count array data from aggregate function 
              for () {

                for loop(){ }//iterates and pushes type array data            

              }
              let result = []
              let result = this.typeArr.map((a)=>{
                let inCount = this.countArr.find((b)=> a.type === b._id)
                if(inCount){
                  Object.assign(a, inCount)
                  return a
                }
                console.log(result)

             // the log prints out the merged Array like this as desired: 

    [{_id: ObjectID type: electronics count: 200}{_id: ObjectID type: household count: 150}, {_id: ObjectID type: clothes count: 500}...]

              this.dataSource = result.data;

              })

        }

模板

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Type Column -->
    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
    </ng-container>

    <!-- Count Column -->
    <ng-container matColumnDef="count">
      <mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.count}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

问题是当像这样动态地在mat表上渲染数据时它打印出的表是行数和重复项的3倍以上，并且计数类型与...不正确匹配。

[Type          |  Count ]
 electronic       200
 household        200
 clothes          200
 electronic       150
 household        150
 clothes          150
 electronic       500
 household        500
 clothes          500

...我希望它打印一次，每种类型都有正确的计数

[Type          |  Count ]
 electronic       200
 household        150
 clothes          500

我该如何实现？

Answer 1

I found it like this

let html be like this

-------------------------------------------------------------

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Type Column -->
    <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> Type. </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>

    <!-- Count Column -->
    <ng-container matColumnDef="count">
        <th mat-header-cell *matHeaderCellDef> Count </th>
        <td mat-cell *matCellDef="let element"> {{element.count}} </td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

-------------------------------------------------------------

Let your ts file be like this ... map datasource leike below

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

export interface PeriodicElement {
  type: string;
  count: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
    {type: 'electronics', count: 200},
    {type: 'household', count: 150},
    { type: 'clothes', count: 500}
   ];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['type', 'count'];
  dataSource = ELEMENT_DATA;
}

--------------------------------------------------------------------------------------

i tried in stackblitz .... 

https://stackblitz.com/angular/droyqvomoyd?embed=1&file=app/table-basic-example.ts

如何合并两个数组并将其以一定角度显示在Mat桌子上

1 个答案: