Angular

Question

我想显示对象数组中的一些数字值，对象本身包含一个包含一些特定数据的数组。

我尝试使用 *ngFor 遍历这些值，但我得到的数字显示为不同值之间的串联，而我想对它们进行总结，这里是对我所面临的问题的简要解释：

class "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 = [];
    }
}

我是如何循环遍历我的数组的（在从我的后端提供商那里获得适当的数据之后）

     <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>

Angular - 对嵌套的 *ngFor 指令中的数值求和

Angular - sum up number values inside nested *ngFor directive

ngfor