Ionic2 promise issue

Hi all,

I'm a newbie and try to turn it for hours so I hope someone can show me my errors, maybe ^^

So, I have a provider that calls a json

`import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
/*
  Generated class for the Products provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Products {
  constructor(http: Http) {
    this.http = http;
    this.products = null;
  }

  load() {
    if (this.products) {
      // already loaded data
      return Promise.resolve(this.products);
    }
    // don't have the data yet
    return new Promise(resolve => {

        this.http.get('./data.json').map(res => res.json())
            .subscribe(data => {
                this.products = data;
                console.debug(this.products);
            },
            err =>{

                console.log("Erreur !!!!" + err.message);
            });
    });
  }
}

`
The page1, Instanciate Products and call the Load function

`import {Page} from 'ionic-framework/ionic';
import {Products} from '../../providers/products/products.js'


@Page({
  templateUrl: 'build/pages/page1/page1.html',
    providers: [Products]
})
export class Page1 {
    constructor(products: Products) {

       this.products = products.load();

    }
}

`

And finally the template that make errors : EXCEPTION: Cannot find a differ supporting object '[object Object]' in [products in Page1@7:22]

`<ion-navbar *navbar>
  <ion-title>Title</ion-title>
</ion-navbar>
<ion-content padding class="page1">


    <ion-list>
            <ion-item *ngFor="#product of products">
                <ion-avatar item-left>
                    <img [src]="{{product.img}}" />
                </ion-avatar>
                <h2>{{product.title}}</h2>

                <p>{{product.desc}}</p>
            </ion-item>
    </ion-list>
</ion-content>

`