-2

我有一个垫表，可以像这样动态呈现数据：

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

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

我在模型中没有计数，我正在从后端查询项目数，并通过使用聚合函数和 $group 对每种类型有多少进行分组来返回计数。类型（电子产品，家庭......）在集合中......

[{_id: objectId type: electronics}
 {_id: objectId type: households}
]

在聚合和分组查询之后，我得到了这个数组

[
 {type: electronics count: 139},
 {type: households  count: 400},
 ...

]

我想添加一个计数列来计算不同项目的数量，其中电子产品将是它自己的行并在计数列中返回 139，并在其自己的行中返回 400

我成功地记录了从后端返回的数据，但是如何在 mat table 上显示它。

使用 angular 5 材料如何遍历 mat-cell 并获取每种类型（电子，来自不同单元格的家庭）并在其各自的行上显示该类型的计数？任何建议将不胜感激！

4

3 回答 3

0

好的。你有两个不同的数组

export interface myData {
  elements: any[];
}
@Component({
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {

  displayedColumns: string[] = ['type','count'];
  dataSource      : myData[] = [];
  arrayThatcontainsCount = [];

  someFunction(){
         this.someService.get().then((result: any) =>{
             this.dataSource = result.data;
         }
   }

 someFunction(){
      //getting count array from api and setting array "arrayThatcontainsCount" 
  }

   getCountOfElement(type){
      let elem = this.arrayThatcontainsCount.find((r)=> r.type == type);
      return elem.count;
  }
}

并在 html

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

<ng-container matColumnDef="count">
  <mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{getCountOfElement(element.type)}} </mat-cell>
</ng-container>
于 2018-11-13T09:42:39.587 回答
0

如果您的组件上有这个数组并想在桌子上显示它。

let mydata = [
 {type: electronics count: 139},
 {type: households  count: 400},
 ...
]

在你的模板中你有

 <table mat-table [dataSource]="dataSource" matSort>

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

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

 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                            <tr mat-row *matRowDef="let row; columns: ['type','count'];">
                            </tr>
</table>
于 2018-11-13T09:33:51.073 回答
0

您可以将返回的数据保存到组件中，然后您可以编写一个函数来从组件中获取给定项目的计数，例如。

零件

从'@angular/core'导入{组件}；

@Component({
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {

  result : any[];
  constructor() { }

 getCount(itemName){
     let count = 0;
     for(var i = 0; i < result.length; i++){
          if(result[i].itemName===itemName){
              count++;
          }
       }
    return count;
  }
}

在桌子上你可以有

<ng-container matColumnDef="items">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.items}} </mat-cell>
</ng-container>

<ng-container matColumnDef="count">
  <mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{getCount(element.itemName)}} </mat-cell>
</ng-container>
于 2018-11-13T08:45:38.180 回答