Angular 双向绑定(bind)以从输入字段获取总计

Question

下面我有 5 个输入字段，分别是租金、摄像头、安全和支持以及预计收入，现在我们如何绑定(bind)这些输入字段以获取每个值并显示 5 个字段的总和并将其分配给总租金字段？

每当值发生变化时，例如租金、凸轮等，它应该更新每月总租金字段的总值

例如，如果租金字段值为 2 ，凸轮为 1 ，安全性为 1 ，支持为 1 ，估计收入为 1 ，则每月总租金的值为 6 。如果我更改任何值，它应该更新总计。

任何人有想法，我们将不胜感激。

#ts 代码

class DealPLSFormFields {
  dealName:string;
  dealSummary:string;
  dealPartner:string;
  startDate: string;
  endDate: string;
  rent: number;
  cam:number;
  totalBrokerCommission: number;
  supportServicesFee: number;
  estimatedOtherRevenue;
  descriptionOfOtherRevenue: string;
  totalMonthlyRentAndFees : number;
  buildOutCostReimbursement: number;
  dealId: number;
  securityMonitoring: any;

  constructor(){
    this.dealName = null;
    this.dealSummary = null;
  }
}

dealPLSFormFields: DealPLSFormFields;
  ngOnInit(): void {   
    this.dealPLSFormFields = new DealPLSFormFields();
   
  }

#html代码

<div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Rent (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.rent"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>CAM (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.cam"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Security Monitoring (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.securityMonitoring"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Support Services Fee (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.supportServicesFee"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <mat-form-field appearance="fill">
            <mat-label>Estimated Other Revenue (e.g, percentage rent, referral fees)</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Description of Other Revenue</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Total Monthly Rent and Fees</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
              [required]="isExistingDeal">
          </mat-form-field>

Answer 1

正如我所说，最好是针对此类用例使用响应式(Reactive)表单，但如果您无法并且想要继续当前的实现，请进行以下更改:

向所有执行计算的输入元素添加一个 keyup 监听器:

<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Rent (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.rent"
      [required]="isExistingDeal">
    
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>CAM (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.cam"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Security Monitoring (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.securityMonitoring"
      [required]="isExistingDeal">
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>Support Services Fee (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.supportServicesFee"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<mat-form-field appearance="fill">
<mat-label>Estimated Other Revenue (e.g, percentage rent, referral fees)</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description of Other Revenue</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Total Monthly Rent and Fees</mat-label>
<input 
  matInput
  [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
  [required]="isExistingDeal">
</mat-form-field>

接下来，在您的组件中:

 calc() {
    const rent = this.dealPLSFormFields.rent ? this.dealPLSFormFields.rent : 0;
    const cam = this.dealPLSFormFields.cam ? this.dealPLSFormFields?.cam : 0;
    this.dealPLSFormFields.totalMonthlyRentAndFees = +rent + +cam;
  }

检查此 stackblitz 的工作示例:https://stackblitz.com/edit/angular-9-material-starter-5ceexh?file=src/app/app.module.ts