angular 添加总和列

Question

我们如何在 angular table 中插入一列，例如根据屏幕截图我想在租金的最后一个值（$/SF）下方添加总文本，我尝试添加 tr 、 td 和 mat 页脚单元格，但它不起作用。有什么想法吗？谢谢。赞赏。

如何在租金的最后一个值（$/SF）下方添加一个文本的总计？？？

我尝试了 Total 但它不起作用。

#html代码

  <table mat-table [dataSource]="bovRentComsCompleted" class="mat-elevation-z0">
                <ng-container *ngFor="let p of rentCompsTableLabel; last as l" matColumnDef="{{p.key}}">
                  <th [ngClass]="{'th-rents-completed-min-width':!l}" mat-header-cell *matHeaderCellDef class="fs-12px">{{p.label}}</th>
                  <td mat-cell *matCellDef="let element; index as i"
                    [ngClass]="{'border-none': i === bovRentComsCompleted.length - 1}" class="fs-12px">
                    <span *ngIf="p.key === 'rent'">{{element[p.key] != null ? '$' : ''}}{{element[p.key] !== null ? (element[p.key] | number : '1.2-2') : '-'}}</span>
                    <span *ngIf="p.key === 'distanceFromWag'">{{element[p.key] !== null ? (element[p.key] | number : '1.2-2') : '-'}}</span>
                    <span *ngIf="p.key === 'quality'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                    <mat-slide-toggle [disabled]="true" [(ngModel)]="element[p.key]" *ngIf="p.key === 'isTls'" color="primary"></mat-slide-toggle>
                    <span *ngIf="p.key === 'address'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                    <span *ngIf="p.key === 'leaseStart'">{{element[p.key] !== null ? (element[p.key] | date : 'MM/dd/yyyy') : '-'}}</span>
                    <span *ngIf="p.key === 'sf'">{{element[p.key] !== null ? (element[p.key] | number) : '-'}}</span>
                    <span *ngIf="p.key === 'notes'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                  </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableRentComps"></tr>
                <tr mat-row *matRowDef="let row; columns: tableRentComps;" class="cursor-default">
                </tr>
              </table>

Answer 1

let total = 0;
let value = 0;

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

findSum(data) {
  for(d in data) {
    total += data.value;
  }
  
  return total;
}

<table mat-table [dataSource]="data">
  <ng-container matColumnDef="sum">
    <th mat-header-cell *matHeaderCellDef> Total: </th>
    <td mat-cell *matCellDef="let d"> {{d.total}} </td>
  </ng-container>
  
</table>

angular 添加总和列

angular add a sum column

javascript

typescript

angular-material

angular