我如何使用获取的数据和角度输入进行计算答案

【问题标题】：how can i do calculations with a fetched data and an input in angular我如何使用获取的数据和角度输入进行计算
【发布时间】：2022-11-27 08:49:51
【问题描述】：

我想将价格乘以输入数量，如图所示

enter image description here

这是我的 .html ：我怎样才能让它读取数组中的每个价格并将其乘以输入数量？

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- adding Quantity and calculation stuff-->
    <ng-container matColumnDef="itemName1">
      <mat-header-cell *matHeaderCellDef> Item-Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.itemName1 | uppercase}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price1">
      <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{element.price1}} </mat-cell>
    </ng-container>
  
    <ng-container matColumnDef="discount1">
      <mat-header-cell *matHeaderCellDef> Discount </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.discount1 | percent}} </mat-cell>
    </ng-container>
  
    <ng-container matColumnDef="tax1">
      <mat-header-cell *matHeaderCellDef> Tax </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.tax1 | percent}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="quantity1">
      <mat-header-cell *matHeaderCellDef> Quantity </mat-header-cell>
      <mat-cell *matCellDef="let element">
         <mat-form-field class="example-width" appearance="outline">
        <mat-label>Quantity</mat-label>
        <input matInput type="number" [formControl]="quNnumber">
      </mat-form-field></mat-cell>
    </ng-container>
  
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <h2>your Gross Total is : {{result}}</h2>

这是我的 .ts ：


const ELEMENT_DATA: PeriodicElement[] = [
  {itemName1 : 'Asus' , quantity1 : '' , price1: 300 , discount1 : 0.07 , tax1 : 0.04 },
  {itemName1 : 'Apple' , quantity1 : '' , price1: 600 , discount1 : 0.03 , tax1 : 0.07 },
  {itemName1 : 'Samsung' , quantity1 : '' , price1: 500 , discount1 : 0.05 , tax1 : 0.01 },
];
@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
  // table stuff
  displayedColumns: string[] = ['itemName1', 'price1', 'discount1','tax1','quantity1'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  quNnumber = new FormControl('');
  pricenumber = new FormControl('');
  result!: number;
  Addnumber(){
    // this.result = parseInt(this.pricenumber) * parseInt(this.quNnumber);
  }

【问题讨论】：

标签： html angular typescript forms math

【解决方案1】：

您可能应该看看 Angular 中的 FormArrays 是什么。您可以使用 FormBuilder 创建它们，并访问用户在您创建的每个 FormControl 中写入的数据，例如代码中的 quNumber，以及 this.quNumber.value。

这假设您有一个“提交”按钮或类似的按钮。如果您希望在用户输入值后立即自动更新价格，您可以查看this answer 以了解如何在每次输入字段更改时更新您的视图。

【讨论】：