Angular - 在嵌套的* ngFor指令内总结数值-Java 学习之路

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

我尝试使用* 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 = [];
    }
}

how i am looping through my array (ofc after getting the appropriate data from my backend provider)

<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);
  }

我得到的结果连接如下：

enter image description here

如您所见，最后一列中显示的结果是第一列和第二列值之间的串联，

同一列应该包括前两列和其他值的总和，但它只是进行连接 .

1 回答

2
通过在我的组件中使用专用方法修复它，

看起来我的模板中提取数字的方法是错误的，模板在我的情况下不能区分数字和字符串，所以无论提供的类型是什么，它都只是考虑它的字符串值 .

以下是我的新方法：
```
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>
```
回复于 2024-04-30T12:52:20+08:00

Angular - 在嵌套的* ngFor指令内总结数值

1 回答

相关问题