在 Angular material 中，我想计算两个 mat-cell 输入值并将其显示在另一个 mat-cell 中（在动态添加的列中）

Question

我创建了一个 mat-table，其中的列是动态添加的。现在我想运行我的两列中的操作 (Unit Price * Qty/Rolls) 并在 Amount 列中显示结果。在页脚我想显示总计 Qty/Rolls 和金额。这是我到目前为止所做的： stackblitz code

我的HTML代码

<mat-table [dataSource]="rows" matSort matSortActive="symbol" matSortDirection="asc">

  <ng-container matColumnDef="{{column}}" *ngFor="let column of columns; let i = index;">

    <span *ngIf="i === 0 ">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        SN
      </mat-header-cell>
      <mat-cell *matCellDef="let element; let sn=index">
        {{sn+1}}
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i<colLenght-3">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element;">
        {{element[column]}}
      </mat-cell>

    </span>
    <span *ngIf="i !== 0 && i>=colLenght-1">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i>=colLenght-2">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" (change)="calculate(i)" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i>=colLenght-3">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" (change)="calculate(i)" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>

  </ng-container>

  <mat-header-row *matHeaderRowDef="columns; sticky: true;"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columns;"></mat-row>

</mat-table>

<button id="hide" add mat-raised-button color="accent">Get Checked Items</button>

TS代码：

  @Input()
  public content: any;
  colLenght: number;
  public rows = new MatTableDataSource<any>();
  public columns = [];
  dataSource = [
    {
      SalesOrderId_Hide: 11,
      ItemId: 11,
      SlNo: 1,
      'Item Name': 'Barcode Label',
      'Description Of Goods': '4"X 3" Type: Mat Fasoin',
      'Qty/Rolls': 5,
      'Unit Price': 5,
      Amount: 9
    }
  
  ];


  private updateRows(): void {
    this.rows = new MatTableDataSource<any>(this.content);
    
  }

  private updateColumns(): void {
    debugger;

    for (const column of Object.keys(this.content[0])) {
      this.columns.push(column);
    }
    this.colLenght = this.columns.length;
  }

  private updateTable(): void {
    if (this.content) {
      this.updateRows();
      this.updateColumns();
    }
  }

  public showFamilies(): void {}
  ngOnInit(): void {
    this.content = this.dataSource;
    this.updateTable();
  }

  calculate(i) {
    console.log(i);
  }
  constructor() {}

Answer 1

使用 Angular Material 中的 example，您可以在 ts 文件中将 calculate 公式设置为:

calculate(i: number) {
    return this.dataSource[i].Amount * this.dataSource[i].UnitPrice
  }

然后在你的html文件中，你可以插入它：

    <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput>{{calculate(i)}}
        </mat-form-field>
    </mat-cell>

请注意，我确实需要将 'Unit Price' 更改为 UnitPrice。

编辑
假设 "Qty/Rolls" 和 "Unit Price" 下的数据永远是你计算的基础，我把 element 的完整内容传递给 calculate:

<span *ngIf="i !== 0 && i>=colLenght-1">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" [(ngModel)]="element[column]"> {{calculate(element)}}<!--Here-->
        </mat-form-field>
      </mat-cell>
    </span>

然后在ts文件中，计算如下：

calculate(el: any) {
    if (el["Qty/Rolls"] && el["Unit Price"]) {
      var a: number = el["Qty/Rolls"];
      var b: number = el["Unit Price"];
      var c: number = a * b;
      console.log("Amount: "+c);//or: return c
    }
  }

在 Angular material 中，我想计算两个 mat-cell 输入值并将其显示在另一个 mat-cell 中（在动态添加的列中）

In Angular material I want to calculate two mat-cell input value and show it in another mat-cell (in Dynamically added Columns)

dynamic-tables

angular-material

angular

mat-table