角度材料垫表：如何将第三列中的两列值相乘

Question

我有一个带有下拉列的角度材料表，用户可以通过该下拉列选择时间长度。用户提供次数后，我想计算每种服务类型的服务费，然后对所有选择的服务进行总计。 [1]：https://i.stack.imgur.com/m2ukB.jpg

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

......
<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 来获取总数并放在表格的页脚中

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

见stackblitz