在 TypeScript 代码中访问 *ngFor 循环的当前元素 (Angular 4)

Question

我的 json 文件中有 5 个人的数组。每个人都有一个数组，其中包含项目。在我的 html 代码中，我使用 *ngFor 遍历这些人以显示他们的名字。我还想显示商品价格的总和。为了一起计算他们的商品价格，我在 TypeScript 代码中使用了一个函数。我正在我的控制台中显示总价格。

问题是，我在 typescript 文件中使用的当前代码再次循环遍历这些人。因此，我使用 *ngFor 遍历 html 中的人员，在此调用函数 getTotal() ，它再次循环遍历这些人。当然，我只想循环一次。

json

  "persons":[
    {
      "name": "Peter",
      "items": [
        {
          "name": "pen",
          "price": 1.50
        },
        {
          "name": "paper",
          "price": 2.00
        }
      ]
    },
    {
      "name": "Maria",
      "items": [
        {
          "name": "scissors",
          "price": 4.00
        },
        {
          "name": "stickers",
          "price": 3.00
        }
      ]
    }

    // three more persons
  ]

html

<div *ngFor="let person of persons"> <!--here I'm looping through the persons-->
  <p>{{person.name}}</p>
  <p>Total <span>{{getTotal()}}</span></p> <!--here I'm calling the function, which will loop through persons again-->
</div>

打字稿

getTotal() {
    for(let person of this.persons){ //here I'm looping through the persons again (what I actually don't want)
      let total = 0;
      for(let item of person.items){
          total = total + item.price;
      }
     console.log(total);
    }
}

现在回答我的问题： 如您所见，我再次在我的 html 代码中使用 *ngFor 循环遍历 persons，并在我的 getTotal() 打字稿代码中再次循环。我这样做只是为了在以下循环中访问他们的项目 (person.items)。我想摆脱第一个循环并访问我正在使用 *ngFor 循环的当前元素。我怎样才能做到这一点，甚至可能吗？

Answer 1

像

一样改变它

As answer to your question , call a function from template side , here it is but would prefer second method to go

模板端：

<p>Total <span>{{getTotal(person.items)}}</span></p>

组件端：

getTotal(items) {
    let total = 0 ;
    for(let item of items){
        total = total + item.price;
    }
    return total;
}

Better way to do is , process all data from component side , rather than calling it from template side

Why ?

In above case function will be called each time the view changes or data change.

组件端：

constructor(){
    this.persons.map(person => {
        person.total = person.items.reduce((pv,cv) => {
            return cv.price + pv.price;
        });
        return person;
    });
}

模板端：

<p>Total <span>{{person.total)}}</span></p>

Answer 2

您可以在 getTotal 函数中传递 person 并且可以在其中添加商品的价格而无需再次循环

<div *ngFor="let person of persons">
  <p>{{person.name}}</p>
  <p>Total <span>{{ getTotal(person) }}</span></p> <!--here I'm calling the function, which will loop through persons again-->
</div>

打字稿

getTotal(person) { 
      let total = 0;
      for(let item of person.items){
          total = total + item.price;
      }  
      return total;
}

Answer 3

将此人发送到 getTotal 方法。我的意思是：

getTotal(person:any){
   let total: number = 0;
   for(item of person.items){
       total += item.price;
   }
   return total;
}

所以在你的 HTML 中它必须是：

<div *ngFor="let person of persons"> 
   <p>{{person.name}}</p>
   <p>Total <span>{{getTotal(person)}}</span></p> <!-- take a look how 
       I send the current person in the *ngFor loop -->
</div>

在 TypeScript 代码中访问 *ngFor 循环的当前元素 (Angular 4)

Accessing current element of *ngFor Loop in TypeScript Code (Angular 4)

json

loops

typescript

ngfor

angular