在HTTP响应

Question

广东话访问深层次的对象，我从存储到一个组件变量HTTP响应

{ 
"files": [ ], 
"posts": [ 
    { 
     "content": "Dies ist ein Test-Posting, das zum Projekt 2 gehört.", 
     "id": 2, 
     "name": "Beispiel Post 2", 
     "timestamp": "Wed, 10 Aug 2016 19:52:09 GMT" 
    } 
], 
"project": { 
    "id": 2, 
    "info": "Dies ist der Text für das Beispiel Projekt 2", 
    "name": "Beispiel Projekt 2", 
    "timestamp": "Wed, 10 Aug 2016 19:50:59 GMT" 
    } 
} 

它得到这个数据，现在我想访问它在我的模板。我试图做这样的事情：

{{project.project.id}} 

它不工作。对象存储这样的：

Object { files: Array[0], posts: Array[1], project: Object } 

我已经尝试了这样的解决方案：iteration a json object on Ngfor in angular 2，但它不会帮助。

继承人的例外，我得到了：
Uncaught (in promise): Error: Error in ./ProjectDetailComponent class ProjectDetailComponent - inline template:0:4 caused by: self.context.project is undefined

有关详细信息，这里有文件：

组件：

@Component({ 
    selector: 'app-project-detail', 
    templateUrl: './project-detail.component.html', 
    styleUrls: ['./project-detail.component.sass'] 
}) 
    export class ProjectDetailComponent implements OnInit { 
    private project; 
    private errorMessage; 

    constructor(private route: ActivatedRoute, 
       private router: Router, 
       private projectService: ProjectsService) { 
    } 

    ngOnInit() { 
     this.route.params.forEach((params: Params) => { 
      let id = +params['id']; 
      this.projectService.getProjects(id).subscribe(
       function (project) { 
        this.project = project; 
       }, 
       error => this.errorMessage = <any>error 
      ); 
     }); 
    } 

} 

服务：

@Injectable() 
export class ProjectsService { 

    constructor(private http: Http) {} 

    private projectsUrl = 'http://localhost:2000/api/projects/'; 

    getProjects(id?: number): Observable<any>{ 
     if(id){ 
      return this.http.get(this.projectsUrl + ""+id) 
       .map(this.extractData) 
       .catch(this.handleError); 
     } else { 
      return this.http.get(this.projectsUrl) 
       .map(this.extractData) 
       .catch(this.handleError); 
     } 


    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     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); 
    } 
} 

我欣赏任何帮助！

Answer 1

该值未分配给您的事情。

ngOnInit() { 
    this.route.params.forEach((params: Params) => { 
     let id = +params['id']; 
     this.projectService.getProjects(id).subscribe(

      // function (project) { 
      // should be 
      (project) => {    // <<<<=== change 
       this.project = project; 
      }, 
      error => this.errorMessage = <any>error 
     ); 
    }); 
} 

，并用它来与

{{project?.project?.id}}