角度-匯總嵌套的* ngFor指令中的數字值

Question

我想顯示對象數組中的一些數字值，對象本身包含一個包含某些特定數據的數組。

我嘗試使用* ngFor遍歷這些值，但是當我要對它們進行總結時，我所得到的數字將顯示為不同值之間的連接，以下是對我所面臨的問題的簡要說明：

類“ Order”：

export class OrdreMission{
    public idOrder:number;    
    // other attributes here
    public concern:Concern [];
    public costs:costs[];
    constructor(){
        this.mission = new Mission();    
        this.costs= [];
        this.concern = [];
    }
}

我如何遍歷數組（從后端提供程序獲取適當的數據后，ofc）

     <table>
            <thead> <!-- my headers --> </thead>
            <tbody> 
                <tr *ngFor="let x of listOrders">
                            <!-- other data displayed here -->
                            <td>
                                <span *ngFor="let k of l.costs">
                                    {{k.typeCost.code=="0808" && k!=undefined && k.idOrder==l.costs.idOrder?k.value:return}}
                                </span>
                            </td>
                            <td>
                                <span #old value="0" *ngFor="let x of l.costs">{{x.typeCost.code!="0808" && x.typeCost.code!="0606"  && x!=undefined && x.idOrder==l.costs.idOrder? sum(old.value,x.value):return}}</span>
                            </td>
                            <td>
                                <span #old2 value="0" *ngFor="let o of l.costs">{{o.typeCost.code!="0606"  && o!=undefined && o.idOrder==l.costs.idOrder?sum(old2.value,o.value):return}}</span>
                            </td>
                          <td>
                               <span #old3 value="0" *ngFor="let m of l.costs">{{m.typeCost.code=="0606"  && m!=undefined && m.idOrder==l.costs.idOrder?sum(old3.value,m.value):return}}
                              </span>
                          </td>
                            <!-- other unrelated data here-->
                </tr>
            </tbody>
</table>

我組件中的sum（）方法：

 sum(old:any,a:any):number{
    if(!Number(old)){
      return Number(a+0);
    }
    else if (!Number(old) && !Number(a)){
      return 0;
    }
    return  Number(a)+Number(old);
  }

我得到的結果是這樣連接的：

如您所見，最后一列顯示的結果是第一列和第二列值之間的串聯，

該同一列應包括前兩列和其他值的總和，但這只是進行串聯。

Answer 1

通過在組件中使用專用方法修復了該問題，

似乎我提取模板中數字的方法是錯誤的，在我的情況下，模板無法區分數字和字符串，因此無論所提供的類型是什么，它都只是將其視為字符串值。

以下是我的新方法：

getTotal(val:Costs[]):number{
    let sum = 0;
    if(val!=undefined){
      val.forEach(element => {
        if(element.typeCost.code!="0606") sum+=element.value; 
      });   
    }
    return sum;
  }

在HTML中，我使用了：

<td>{{getTotal(l.costs)}}</td>