Question

我有一个mat-table，可以像这样动态地呈现数据：

<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

我已经成功记录了从后端返回的数据，但是如何在垫子表上显示它们。

使用5号角材料如何遍历mat-cell并抓住每种类型（电子产品，来自不同单元的家庭），并在其相应的行上显示该类型的计数？任何建议将不胜感激！

Answer 1

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

组件

从'@ 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>

Answer 2

如果您的组件上有此数组，并希望在表上显示它。

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>

Answer 3

好。你有两个不同的数组

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>

如何根据来自其他Mat-Cell的数据向Mat-Cell馈送数据

3 个答案: