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

Question

我创建了一个垫表，其中动态添加了列。现在我想在我的两列（单价 * 数量/卷）中运行该操作并在 Amount 列上显示结果。在页脚中，我想显示总数量/卷和数量。这是我到目前为止所做的： stackblitz 代码

我的 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() {}

标签： angularangular-materialmat-tabledynamic-tables

Answer 1

使用 Angular Material 中的示例，您可以将ts文件中的计算公式设置为：

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"elementcalculate

<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
    }
  }