Angular - суммировать числовые значения внутри вложенной директивы * ngFor - PullRequest
Новая
       6

Angular - суммировать числовые значения внутри вложенной директивы * ngFor

0 голосов
/ 04 мая 2018

Я хочу отобразить некоторые числовые значения из массива объектов, сам объект содержит массив, содержащий некоторые конкретные данные.

Я попытался просмотреть значения с помощью * 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 = [];
    }
}

как я перебираю свой массив (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);
  }

результаты, которые я получаю, объединяются, например:

enter image description here

Как видно, результат, отображаемый в последнем столбце, представляет собой объединение значений первого и второго столбцов,

тот же столбец должен включать в себя сумму двух предыдущих столбцов и другие значения, но он просто создает конкатенацию.

1 Ответ

0 голосов
/ 04 мая 2018

Исправлено с помощью специальных методов в моем компоненте,

похоже, что мой подход к извлечению чисел в моем шаблоне был неверным, шаблон не мог различать числа и строки в моем случае, поэтому он просто считает его строковым значением независимо от того, какой тип предоставлен.

ниже мой новый подход: 

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