1

我有一系列衬衫，每件衬衫都有一个价格，我想使用 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>

更新的衬衫组件：

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

1 回答 1

4

在解决承诺之前调用您的 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 结构具有作为字符串类型的成本属性，应将其编辑为数字类型，如下所示：

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

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

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

关于您问题的另一个要素：

来自 angular2 网站：

服务通常是具有狭窄、明确定义的用途的类。它应该做一些具体的事情并且做得很好。

示例包括：
- 日志服务
- 数据服务
- 消息总线
- 税款计算器
- 应用程序配置

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

示例：
服务总成本：如果总成本可能只需要在后端检索衬衫列表后计算一次，“将计算移至服务器后端也会更有意义”。

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

于 2016-03-01T03:56:01.430 回答