Question

我有一个像这样的对象：

this.obj = {{name: 'Hello 1'}, {'name': 'Hello 2'}}

我在角度2（ionic2）上通过这个对象循环：

<div class"item" *ngFor="let item as obj"> 
  <span>{{item.name}}</span>
  <span>{{item.count}}</span>
</div>

item.count不存在，显然，它不会在视图中呈现。但我需要在视图中实现此属性。在角度1中，我认为像ng-init="item.count = 0"这样的问题可以解决这个问题，但是在Angular 2中没有启用它。

Answer 1

更新评论

该解决方案似乎是Angular本身的一个错误，因为Aluan指出使用点属性分配结果＆＃34; Bindings不能包含第41和34列的分配。所以我打开了github issue

<强> ORIGINAL

如果您想在模板中执行此操作，那么您可以通过object['propertyName']语法在JS中动态添加属性（TypeScript是技术上的超集，因此在技术上有效）。

模板的HTML变为

<div class="item" *ngFor="let item of obj"> 
  <span>{{item.name}}</span>
  <span>{{item['count'] ? item['count'] : item['count'] = 0}}</span>
  <button (click)="increment(item)">plus</button>
  <button (click)="decrement(item)">minus</button>
</div>

按钮逻辑的代码：

increment(item) {
  item.count++;
}

decrement(item) {
  item.count--;
}

工作示例：http://plnkr.co/edit/b5fe87kFm2nxs3kabZRo?p=preview

在* ngFor Angular 2上设置新的对象属性

1 个答案: