Question

我有一系列衬衫，每件衬衫都有价格，我想用Angular 2获得所有衬衫的总价。

这就是我的数据：

shirts: [
{
 name: 'shirt 1',
 cost: '20'
},
{
 name: 'shirt 2',
 cost: '10'
},
{
 name: 'shirt 3',
 cost: '10'
}
]

我想将成本加在一起并显示在我的组件中这大致是我到目前为止所处的位置：

export class ShirtsListComponent {
  shirts: Shirts;

  constructor(@Inject(Shirts) csp: Promise<Shirts>, cdRef: ChangeDetectorRef) {
    csp.then((cs) => {
      this.shirts = cs;
      cdRef.reattach();
    });

    for (var shirt in this.shirts) {
      console.log(shirt);
    }
  }
}

麻烦的是console.log(shirt)在这里没有返回任何内容，即使它确实如此，我也不确定如何将新的shirt项添加到一起。这个问题的另一个要素是我应该在组件上还是在服务中这样做？

修改我做了以下更改，但我得到了0，我应该得到40

HTML：

<ul class="list-group">
  <li class="list-group-item" [shirtListItem]="shirt" *ngFor="#shirt of shirts"></li>
</ul>
<pre>{{totalShirts}}</pre>

更新了ShirtComponent：

export class ShirtListComponent {
  shirts: Shirts;
  totalShirts:number = 0;
  constructor(@Inject(Shirts) csp: Promise<Shirts>, cdRef: ChangeDetectorRef) {
    csp.then((cs) => {
      this.shirts = cs;
      cdRef.reattach();
      this.shirts.forEach(s => this.totalShirts += s.cost );
    });
  }
}

Answer 1

在解析promise之前调用for循环。您可以在promise resolve函数中执行for循环。像这样：

export class ShirtsListComponent {
shirts: Shirts;
totalCost:number = 0;
  constructor(@Inject(Shirts) csp: Promise<Shirts>, cdRef: ChangeDetectorRef) {
    csp.then((cs) => {
      this.shirts = cs;
      cdRef.reattach();
      this.shirts.forEach(s => this.totalCost += s.cost );
    });
  }
}

<强>更新
您的Json结构将cost属性作为字符串类型，应编辑为数字类型，如下所示：

shirts: [
{
 name: 'shirt 1',
 cost: 20
}
...
]

或者，您可以更改成本总和的行：

this.shirts.forEach(s => this.totalCost += parseFloat(s.cost) );

关于问题的其他要素：

来自angular2网站：

服务通常是一个具有狭窄，明确目的的类。它应该做一些特定的事情，做得好。

例子包括：
   - 伐木服务
   - 数据服务
   - 消息总线
   - 税务计算器
   - 应用程序配置

关于你的问题，对我而言，只有在总计算总成本（包括所有衬衫而不仅仅是列表的一部分）时才将成本计算放在服务上是有意义的。

示例：
总体服务成本：如果在后端检索衬衫列表之后需要仅计算一次总成本“将计算移动到服务器后端也会更有意义”。

组件的总费用：如果您只显示当前在页面上显示的衬衫的总费用，当前添加到购物车的衬衫，当前用户选择的衬衫......等等

使用Angular 2获取数组中每个项的总值

1 个答案: