angular material mat-table：如何将第三列中的两列值相乘

Question

我有一个 angular material table 带有一个下拉列，用户可以通过它 select 时间长度。用户提供次数后，我想计算每个服务类型的服务费，然后做一个总和，对所有 selected 服务求和。 [1]: https://i.stack.imgur.com/m2ukB.jpg

问题是所有行的小计（价格 * 月数）根据最后 selected 月数动态变化，尽管之前 selected 月数保持不变。这是我的模板

......
<ng-container matColumnDef="price">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Price (USD/m) </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.price | currency}} </mat-cell>
</ng-container>                                        
<ng-container matColumnDef="month">
    <mat-header-cell *matHeaderCellDef> Months </mat-header-cell>
    <mat-cell *matCellDef="let element">
            <mat-select placeholder="0" (selectionChange)="onChangeMonth($event)">
                <mat-option *ngFor="let month of months" [value]="month.value">
                {{ month.viewValue }}
                </mat-option>
            </mat-select> 
    </mat-cell>                     
</ng-container>
<ng-container matColumnDef="subtotal">
    <mat-header-cell *matHeaderCellDef> SubTotal </mat-header-cell>
    <mat-cell *matCellDef="let element">
        {{element.price * serviceLength}}
    </mat-cell>                               
</ng-container> 

......

这是我的 ts:

export class StockAddsubsComponent implements OnInit {
  columnsToDisplay: string[] = ['id','name','price','month','subtotal'];
  listData: MatTableDataSource<any>;  
  months: any [] = [{value: 1, viewValue: 1}, {value: 3, viewValue: 3}, {value: 6, viewValue: 6}, {value: 12, viewValue: 12}
  ]; 
  serviceLength: number;
  
  @ViewChild(MatSort) sort: MatSort;
  
  constructor(private feesService: FeesService) { }

  ngOnInit(): void {
    this.createFeeList();
  }

  createFeeList() {                
    this.feesService.getFeeList().subscribe((data: []) => {
      this.listData = new MatTableDataSource(data);
      }, error => {
        console.log(error);
    });
  } 

  onChangeMonth(event) {
    this.serviceLength = event.value;
  }
}

Answer 1

只需在 mat-select

中使用 [(ngModel)]="element.month"

<mat-select placeholder="0" [(ngModel)]="element.month">
    <mat-option *ngFor="let month of months" [value]="month.value">
    {{ month.viewValue }}
    </mat-option>
</mat-select>

并使用{{element.price*element.month}}

注意：您也可以使用 getter 来获取总数并放入 table

的页脚

get total()
{
    return this.listData.data.map(x=>x.month*x.price).reduce((a,b)=>a+b)
}

见stackblitz

angular material mat-table：如何将第三列中的两列值相乘

angular material mat-table: how to multiply two column values in a 3rd column

calculated-columns

angular-material

calculation

angular

mat-table