Error when adding pipe to for loop

I am getting an error when I add groupBy pipe on a for loop <div class="row" *ngFor="let tsk of tsks | groupBy: 'MilestoneName'">

And the error that throws is Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

The array that I looping through is an Array

[danrevah]

The last piece of code that I wrote works perfectly for this data structure: Make sure you copying it properly.

tsks = [{
      CompletedFlag: true,
      ProgressFlag: false,
      DueDate:"2014-10-02T13:12:37.027",
      Signup: "2014-10-04T11:51:10.137",
      ObMilestone: 1,
      ObTask: 119,
      AssignedToId: 0,
      Company: "ABC Corp",
      Description: "Lorem Ipsum",
      Favourite: null,
      FirstName: "Libin",
      LastName: "J",
      MilestoneName: "Blue",
      OnboarderStatus: "Live",
      Partner : null
    },
    {
     CompletedFlag: true,
      ProgressFlag: false,
      DueDate:"2014-10-02T13:12:37.027",
      Signup: "2014-10-04T11:51:10.137",
      ObMilestone: 1,
      ObTask: 119,
      AssignedToId: 0,
      Company: "ABC Corp",
      Description: "Lorem Ipsum",
      Favourite: null,
      FirstName: "Libin",
      LastName: "J",
      MilestoneName: "Blue",
      OnboarderStatus: "Live",
      Partner : null
    }];

<div class="row" *ngFor="let task of tsks | groupBy: 'MilestoneName' | pairs">
  <div>Group milestone name: {{task[0]}}</div>

  <div class="row" *ngFor="let t of task[1]">
    <div>Task: {{t.FirstName}}</div>
  </div>
</div>

[danrevah]

Try using the pairs pipe:

<div class="row" *ngFor="let task of tsks | groupBy: 'MilestoneName' | pairs">
    <div>Group milestone name: {{task[0]}}</div>

   <div class="row" *ngFor="let t of task[1]">
      <div>Task: {{t}}</div>
   </div>
</div>