Angular 以角度计算特定项目的小计

如何将小计金额应用于特定项目

//HTML
<div *ngFor="let addedItem of items; let i = index " >
   <div>
     <input id="{{ addedItem.variationId }}"
     [(ngModel)]="addedItem.qtyTotal"
     [ngModelOptions]="{standalone: true}" min="1" type="number"  
     value="{{ addedItem.qtyTotal }}" 
     (change)="changeSubtotal($event.target.value, addedItem.variationCost,i)">
    </div>
    <div #subTotalWrap>{{ addedItem.variationCost | currency }}</div>
</div>

<div>{{ total | currency }}</div>

到目前为止，我有这些示例：当我添加新项目并更改最后一个项目的数量时，我最近添加的所有项目也在更新。我想将更新“get subTotal（）changeSubtotal（）”仅应用于特定项目

这是我的部件

//Component

items = this.cartService.getItems();
subTotal: any;

 //-----  total 
    get total(){
        return this.items.reduce((sum,x)=>  ({
            qtyTotal:1,
            variationCost:sum.variationCost+x.qtyTotal*x.variationCost
        }),
        {qtyTotal:1,variationCost:0}).variationCost;
    }

    //-----  subtotal
    // get subTotal(){
    //     return this.items.reduce((_sum,x)=>  ({
    //         qtyTotal:1,
    //         variationCost:x.qtyTotal*x.variationCost
    //     }),
    //     {qtyTotal:1,variationCost:0}).variationCost;
    // }

    changeSubtotal(index: number){
    console.log(index)
       return this.subTotal = this.items.reduce((sum, item) => sum += 
        (item.qtyTotal || 0) * (item.variationCost || 0) ,0)
     }

这是我的HTML

// HTML

<div *ngFor="let addedItem of items; let i = index ">
   <div>
     <input id="{{ addedItem.variationId }}"
     [(ngModel)]="addedItem.qtyTotal"
     [ngModelOptions]="{standalone: true}" min="1" type="number"  
     value="{{ addedItem.qtyTotal }}" 
     (click)="changeSubtotal(i)">
    </div>
    <div>{{ subTotal | currency }}</div>
</div>

<div>{{ total | currency }}</div>

//HTML
{{小计|货币}
{{总|货币}

这里的示例代码：

我修复了它

我使用@ViewChildren decorator引用了该元素，并创建了一个方法以特定项为目标

//HTML
<div *ngFor="let addedItem of items; let i = index " >
   <div>
     <input id="{{ addedItem.variationId }}"
     [(ngModel)]="addedItem.qtyTotal"
     [ngModelOptions]="{standalone: true}" min="1" type="number"  
     value="{{ addedItem.qtyTotal }}" 
     (change)="changeSubtotal($event.target.value, addedItem.variationCost,i)">
    </div>
    <div #subTotalWrap>{{ addedItem.variationCost | currency }}</div>
</div>

<div>{{ total | currency }}</div>

//HTML
{{addedItem.variationCost | currency}
{{总|货币}

//组件
@ViewChildren（‘小计包装’）小计项：QueryList；
变更小计（数量、金额、指数）{
施工小计=金额*数量；
this.subTotalItems.toArray（）[index].nativeElement.innerHTML=subTotal
}