在Angular 2 + Immutable.js中迭代(使用* ngFor)

时间:2016-10-28 19:09:24

标签: angular typescript immutable.js

我正在使用Angular 2和Immutable JS,但我似乎无法在我的模板中使用简单的for循环。真的很令人沮丧。我尝试了以下旧语法(基于教程)

<div *ngFor='#filter of filterArray' class='filter-row'>
  <div class='row-title'>{{filter.get(title)}}</div>
</div>

和新语法

<div *ngFor=' let filter of filterArray' class='filter-row'>
  <div class='row-title'>{{filter.get(title)}}</div>
</div>

我尝试使用和不使用.get语法来处理大括号内的不可变映射,但我无法让它工作..

filterArray看起来像:

this.filterArray = fromJS([{
  title: 'Brand',
},
{
  title: 'Category'
},
{
  title: 'Each UPC'
}]);

我需要使用一些特殊语法才能使用吗?我的浏览器上没有显示任何内容,使用let语法时没有任何错误。

版本:

"@angular/common": "^2.1.0",
"@angular/compiler": "^2.1.0",
"@angular/core": "^2.1.0",
"@angular/forms": "^2.1.0",
"@angular/http": "^2.1.0",
"@angular/platform-browser": "^2.1.0",
"@angular/platform-browser-dynamic": "^2.1.0",
"@angular/router": "^3.0.1",
"immutable": "^3.8.1",
"typescript": "2.0.2"

编辑:以下有效,但看起来不错

  <div *ngFor='let filter of filterArray let i=index' class='filter-row'>
    <div class='row-title'>{{filterArray.get(i).get('title')}}</div>
  </div>

1 个答案:

答案 0 :(得分:0)

这对我有用:

<div *ngFor='let filter of filterArray' class='filter-row'>
    <div class='row-title'>{{filter.get('title')}}</div>  
</div>