>

수량이나 가격을 변경할 때 총계를 자동으로 변경하고 싶습니다.

이 코드를 사용하려고하는데 아무 일도 일어나지 않습니다.

내 제품은 : this.products = this.ps.getProduct();

    this.form= this.fb.group({
          'total': new FormControl('', [Validators.required, Validators.nullValidator]),
           'products': this.fb.array([
          ]),
        });

이것은 Total = p.Unit_price * p.Quantity; 를 계산하는 함수입니다.

totalFunc() {
    let Total = 0;
    for (let p of this.products) {
        Total = p.Unit_price * p.Quantity;
    }
    return Total;
}

이 기능은 이제 HTML 코드로 표시하고 싶습니다.이를 위해 ng-change를 사용합니다

<form [formGroup]="form" >
<tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
<td>
<input formControlName="Unit_price" [value]="(item.Unit_price)"  type="number" />
</td>
<td>
<input formControlName="Quantity" [value]="(item.Quantity)"  type="number" />
</td>
<td>
<input formControlName="Subtotal" [value]="(item.Subtotal)" ng-change="totalFunc()" readonly type="number" />
</td>
</tr>
<form>


  • 답변 # 1

    따라서 Subtotal 를 업데이트하고 싶습니다   Unit_price 의 변경 사항에 따라  뿐만 아니라 Quantity 그렇지 않습니까? 그렇다면 totalFunc()  메소드는 ng-change 에서 호출해야합니다.  그 텍스트 상자의 이벤트. 그것은 Unit_price 의 코드를 의미합니다.   <input formControlName="Unit_price" [value]="(item.Unit_price)" ng-change="totalFunc()" type="number" /> 가 될 것입니다  수정 된 코드는 다음과 같아야합니다.

    <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
        <td>
            <input formControlName="Unit_price" [value]="(item.Unit_price)" ng-change="totalFunc()" type="number" />
        </td>
        <td>
            <input formControlName="Quantity" [value]="(item.Quantity)" ng-change="totalFunc()" type="number" />
        </td>
        <td>
            <input formControlName="Subtotal" [value]="(item.Subtotal)"  readonly type="number" />
        </td>
    </tr>
    
    

  • 답변 # 2

    이 수명주기 후크 방법을 사용할 수 있습니다

    ngOnChange(){
         //Update your total in this area
    }
    
    

    이 이벤트는 현재보기의 입력 필드가 변경 될 때마다 트리거됩니다

관련 자료

  • 이전 java - jdbc 오류 - 선택에 대해 executeupdate ()를 발행 할 수 없습니다
  • 다음 python - Java 코드에서 py 스크립트를 실행하는 방법은 무엇입니까?