Брус доступа объектов глубокого уровня в HTTP Response

Question

Я получил эти данные из HTTP Response

{ 
"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, но это не поможет.

Heres исключение я получил:
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}}