Iterating in Angular 2 + Immutable.js (using *ngFor)

Question

I'm using Angular 2 with Immutable JS, but I can't seem to get a simple for-loop to work in my template. It's really frustrating. I tried the following old syntax (based on tutorials)

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

and the new syntax

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

I tried with and without the .get syntax for the immutable maps within the curly braces and I just can't get it to work..

filterArray looks like:

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

Is there some special syntax I need to use so that this works? Nothing is displaying on my browser, and I get no errors when using the let syntax.

Versions:

"@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"

Edit: the following works but it looks bad

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

Answer 1

This worked for me:

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