渲染时访问下一行 Angular Material table

Question

<ng-container cdkColumnDef="weight">
  <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container>

我想显示 {{element.weight} + 前一个 row.weight} 的元素，如滚动总重量。语法是什么？工作样本来源取自 here.

Answer 1

我已经通过自定义逻辑实现了Rolling weight total，如有任何疑问，请通过并发表评论！

Stack blitz link

在html

    <!-- Weight Column -->
<ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{getElementWeight(element)}} </td>
    <!--  <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td> -->
</ng-container>

在 ts

declare global {
interface Array < T > {
    getSummedWeight(): any;
    containsElement(e: any): any;
     }
  }

    custom:any = [];
getElementWeight(e) {
    if (this.custom.containsElement(e)) {
        this.custom = [];
        console.log("########contains#####")
    }
    this.custom.push({
        'position': e.position,
        'name': e.name,
        'weight': e.weight,
        'newweight': e.weight + (this.custom.length == 0 ? 0 : this.custom.getSummedWeight())
    })
    console.log(this.custom)
    return this.custom.length == 0 ? 0 : this.custom[this.custom.length - 1].newweight

}


  if (!Array.prototype.getSummedWeight) {
Array.prototype.getSummedWeight = function(): any {
    let totalWeight = this.length == 1 ? this[this.length - 1].weight :
        this[this.length - 1].weight;
    return totalWeight;
    }
}
  if (!Array.prototype.containsElement) {
Array.prototype.containsElement = function(e): any {
    for (let i = 0; i < this.length; i++) {
        if (this[i].position === e.position)
            return true;
    }
    return false;
   }
 }

渲染时访问下一行 Angular Material table

Accessing next previous row while rendering Angular Material table

angular

angular-material2

angular-material-table