Angular2 / TypeScript& HTTP:如何将对象附加到组件?

时间:2015-11-27 10:40:06

标签: javascript node.js http typescript angular

我试图显示其余api中的项目名称列表。我在响应observable上调用map,并订阅获取解析的items对象。

如何将对象附加到组件并在html模板上显示item.name列表?



import { Component, bootstrap } from 'angular2/angular2';
import { Http, HTTP_PROVIDERS } from 'angular2/http';

@Component({
  selector: 'item-app',
  viewProviders: [HTTP_PROVIDERS],
  templateUrl: 'app/content.html'
})

class ItemsComponent {
  items: Object;

  constructor(http: Http) {
    http.get('http://localhost:3000/api/items')
      
       .map(response => response)
       .subscribe(
          items => this.items = items
       );
  }
}

  <ul>
    <li *ng-for="#item of items">
      {{ item.name }}
    </li>
  </ul>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

我相信地图中的回调是一个Response对象。如果响应是JSON,则需要调用

.map(response => response.json())

完成后,如果实际响应是数组,则绑定应该有效。

请参阅http API示例https://angular.io/docs/ts/latest/api/http/Http-class.html

答案 1 :(得分:1)

在alpha 46之后你必须做这样的事情来明确告诉TypeScript你正在处理一个Response类型的对象:

INDEX(vin, date_created)

我还有一个包含文档的工作示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http http://www.syntaxsuccess.com/angular-2-samples/#/demo/http