Как передать данные в мат-ячейку на основе данных из другой мат-ячейки

Question

У меня есть таблица соответствия, которая динамически отображает данные следующим образом:

<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, как пройти через ячейку матов и захватить каждый тип (электронный, домохозяйства из другой ячейки) и отобразить счет для этого типа в соответствующей строке?Любое предложение будет оценено!

Answer 1

Если у вас есть этот массив в вашем компоненте и вы хотите показать это в таблице.

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 2

ки.у вас есть два разных массива

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>

Answer 3

вы можете сохранить ваши данные, возвращающиеся в ваш компонент, а затем вы можете написать функцию, чтобы получить счетчик данного элемента из компонента, как.

компонент

import {Component} from '@ 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>