Question

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

我尝试使用* ngFor浏览值但是我得到的数字显示为不同值之间的串联，而我想总结它们，这里是我面对的简要解释：

“订单”类：

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指令内总结数值

1 个答案: