Angular2で*ngforが動作しません。

質問内容

Angular2(2.0.1)において、サーバーのMySQLからSequelizeで取得したレコードを画面にngforを使って一覧表示しようとしています。
クライアント側で取得には成功しましたが、画面に何も表示されません。
MySQLからの取得ではなく、固定値をcomponentのlistに代入すると正常に動作するため、json→componentの変数の代入がうまくいっていないと考えております。
何か下記の実装でお気づきの点がありましたがご教授頂ければ幸いです。

コンポーネントクラス

サーバーから取得したjsonを変数listに格納しています。

@Component({
  template: `
     <div *ngFor="let item of list| async">
        {{item.name}}
     </div>
  `
})
export class ArticleComponent  implements OnInit 
{
   list: Item[] = []; 

   constructor(private http:Http, private service: AppService) {}

   ngOnInit(): void {
      // 画面に表示されないパターン
      // modelsには取得したレコードが文字列として格納されてしまっています。
      this.list= this.service.get().then(function(models){
         return models;
      }
      // 画面に表示されるパターン
      this.list= this.service.get().then(function(models){
         return [{"name":"foo"}, {"name":"bar"}];
      }
   }
}

サービスクラス

WebサービスでMySQLのレコードを取得しています。

@Injectable()
export class AppService {
   get(): Promise<Item[]>{
        return this.http.get("app/list")
                        .toPromise()
                        .then(response => response.json() as Promise<Item[]>)
                        .catch(this.handleError);
   }
}