呈现Http结果Angular2

我试图在模板中呈现Http调用结果，但没有成功。 事实上，我可以一路返回到这个.business，但是我无法在视图中呈现它。我错过什么了吗？在这里似乎很神奇：

以下是我的组件：

import { Component, OnInit, Input } from '@angular/core';
import { Business } from './business';
import { BusinessService } from './business.service';
import '/app/rxjs-operators';
@Component({
  moduleId: module.id,
  selector: 'app-business',
  templateUrl: 'business.component.html',
  styleUrls: ['business.component.css'],
  providers:[BusinessService]
})
export class BusinessComponent implements OnInit {
  @Input() business: Business;
  // business: Business;
  errorMessage: string;
  mode = 'Observable';
  constructor(private businessService: BusinessService) {

  }

  ngOnInit() {
    this.getBusiness();
  }

  getBusiness(){
    this.businessService.getBusiness()
      .subscribe(
        function(business){
          this.business = business;
          console.log(this.business); // this outputs correct JSON
        },
        error =>  this.errorMessage = <any>error);
  }
}

从'@angular/core'导入{Component，OnInit，Input}；
从“./Business”导入{Business}；
从“/business.service”导入{BusinessService}；
导入“/app/rxjs操作符”；
@组成部分({
moduleId:module.id，
选择器：“应用程序业务”，
templateUrl:'business.component.html'，
样式URL:['business.component.css']，
提供商：[业务服务]
})
导出类BusinessComponent实现OnInit{
@输入（）业务：业务；
//业务:业务;；
错误消息：字符串；
模式=‘可观察’；
建造商（私人业务服务：业务服务）{
}
恩戈尼尼特（）{
这个.getBusiness（）；
}
getBusiness（）{
this.businessService.getBusiness（）
.订阅(
职能（业务）{
这就是生意；
console.log（this.business）；//输出正确的JSON
},
error=>this.errorMessage=error）；
}
}

我的服务：

import { Injectable } from '@angular/core';
import { Observable }     from 'rxjs/Observable';
import { Http, Response } from '@angular/http';

import { Business } from './business';

@Injectable()
export class BusinessService {
  businessUrl:'http://localhost:8082/business/1';
  constructor(private http:Http){}

  getBusiness():Observable<Business> {
    console.log('http://localhost:8082/business/1');
    return this.http.get('http://localhost:8082/business/1')
      .map(this.extractData)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    console.log(body);
    return body || { };
  }

  private handleError(error:any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@angular/Http'导入{Http，Response}；
从“./Business”导入{Business}；
@可注射（）
出口级商务服务{
businessUrl:'http://localhost:8082/business/1';
构造函数（私有http:http）{}
getBusiness（）：可观察{
console.log（'http://localhost:8082/business/1');
返回此.http.get（'http://localhost:8082/business/1')
.map（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
让body=res.json（）；
控制台日志（主体）；
返回体| |{}；
}
私有句柄错误（错误：任意）{
//在现实世界的应用程序中，我们可能会使用远程日志记录基础设施
//我们还将深入挖掘错误，以获得更好的信息
让errMsg=（error.message）？error.message：
error.status？`${error.status}-${error.statusText}`:'服务器错误'；
console.error（errMsg）；//改为登录到控制台
返回可观察抛出（errMsg）；
}
}

您应该使用箭头函数而不是fat函数：

@Component({
  moduleId: module.id,
  selector: 'app-business',
  templateUrl: 'business.component.html',
  styleUrls: ['business.component.css'],
  providers:[BusinessService]
})
export class BusinessComponent implements OnInit {
  @Input() business: Business;
  // business: Business;
  errorMessage: string;
  mode = 'Observable';

  constructor(private businessService: BusinessService) {

  }

  ngOnInit() {
    this.getBusiness();
  }

  getBusiness(){
    this.businessService.getBusiness()
      .subscribe(
        (business) => { // <-------
          this.business = business;
      );
  }
}

@组件({
moduleId:module.id，
选择器：“应用程序业务”，
templateUrl:'business.component.html'，
样式URL:['business.component.css']，
提供商：[业务服务]
})
导出类BusinessComponent实现OnInit{
@输入（）业务：业务；
//业务:业务;；
错误消息：字符串；
模式=‘可观察’；
建造商（私人业务服务：业务服务）{
}
恩戈尼尼特（）{
这个.getBusiness（）；
}
getBusiness（）{
this.businessService.getBusiness（）
.订阅(
（business）=>{/您应该使用箭头函数而不是fat函数：

@Component({
  moduleId: module.id,
  selector: 'app-business',
  templateUrl: 'business.component.html',
  styleUrls: ['business.component.css'],
  providers:[BusinessService]
})
export class BusinessComponent implements OnInit {
  @Input() business: Business;
  // business: Business;
  errorMessage: string;
  mode = 'Observable';

  constructor(private businessService: BusinessService) {

  }

  ngOnInit() {
    this.getBusiness();
  }

  getBusiness(){
    this.businessService.getBusiness()
      .subscribe(
        (business) => { // <-------
          this.business = business;
      );
  }
}

@组件({
moduleId:module.id，
选择器：“应用程序业务”，
templateUrl:'business.component.html'，
样式URL:['business.component.css']，
提供商：[业务服务]
})
导出类BusinessComponent实现OnInit{
@输入（）业务：业务；
//业务:业务;；
错误消息：字符串；
模式=‘可观察’；
建造商（私人业务服务：业务服务）{
}
恩戈尼尼特（）{
这个.getBusiness（）；
}
getBusiness（）{
this.businessService.getBusiness（）
.订阅(
（business）=>{/根据我的说法，一切似乎都很好。仍然使用
（）=>一些
箭头功能，如下所示

getBusiness(){
    this.businessService.getBusiness()
      .subscribe((business)=>{         //<----added arrow function
          this.business = business;
          console.log(this.business);  
        })
       .(error) => { this.errorMessage = <any>error}
  }

getBusiness（）{
this.businessService.getBusiness（）
.subscribe（（业务）=>{/{this.errorMessage=error}
}
根据我的说法，一切似乎都很好。仍然使用如下所示的箭头功能

getBusiness(){
    this.businessService.getBusiness()
      .subscribe((business)=>{         //<----added arrow function
          this.business = business;
          console.log(this.business);  
        })
       .(error) => { this.errorMessage = <any>error}
  }

getBusiness（）{
this.businessService.getBusiness（）
.subscribe（（业务）=>{/{this.errorMessage=error}
}
Ah！因此，在arrow函数中，this跳过函数本身？到调用函数的对象。有关详细信息，请参阅此链接：Ah！因此，在arrow函数中，this跳过函数本身？到调用函数的对象。有关详细信息，请参阅此链接：谢谢，@micronyks。其他回答者得到了我的答案比你们早6秒，但你们都是对的：-）谢谢，@micronyks。其他回答者比你们早6秒，但你们都是对的：-）