Angular2:Http主机详细信息调用

我想对Angular2中的主细节Http调用进行一些澄清和帮助

我已经阅读了如何在Angular2中链接Http调用的答案

就我而言，问题是不同的。例如，我希望检索SWAPI中某个人的详细信息，并显示该人的详细信息以及有关其电影的详细信息。贝娄，你知道我到目前为止所做的一切，但它不起作用

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Response } from '@angular/http';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';


interface Film {
    id: number;
    title: string;
    opening_crawl: string;
    director: string;
    producer: string;
}

interface Person {
    id: number;
    name: string;
    mass: number;
    height: number;
    gender: string;
    films: string[];
}

@Component({
    selector: 'person-details',
    template: '<h3>Details</h3><ul><li><b>Name : </b>{{person.name}} </li><li><b>Mass : </b> {{person.mass}} </li> <li><b>height :</b> {{person.height}} </li></ul>'
    //displaying personnage films
})
export class PersonDetails2Component implements OnInit, OnDestroy {
    person: Person;
    sub: any;
    filmdetails: any;
    private baseUrl: string = 'http://swapi.co/api/people/1/';

    constructor(private http: Http) {
        console.log('PersonDetails2Component constructor');
    }

    ngOnInit() {
        console.log('ngOnInit');

        this.http.get(this.baseUrl, {headers: this.getHeaders()}).map((res: Response) => {
            this.person = res.json().results.map(toPerson);
            console.log('this.person');
            return this.person;
        })
            .flatMap((person) => this.http.get(person.films[0])).map((res: Response) => res.json())
            .subscribe(res => this.filmdetails = res);
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }

    private getHeaders() {
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        return headers;
    }
}

function toPerson(r: any): Person {
    let person = <Person>({
        id: extractId(r),
        name: r.name,
        mass: r.mass,
        height: r.height,
        gender: r.gender,
        films: r.films
    });
    console.log('person parsed =', person);
    return person;
}

function extractId(personData: any) {
    let extractedId = personData.url.replace('http://swapi.co/api/people/', '').replace('/', '');
    return parseInt(extractedId);
}

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从'@angular/http'导入{Response}；
从'@angular/Http'导入{Http，Headers}；
从'rxjs/Rx'导入{Observable}；
界面膜{
id：编号；
标题：字符串；
打开爬网：字符串；
导演：弦；
制作人：字符串；
}
接口人{
id：编号；
名称：字符串；
质量：数量；
高度：数字；
性别：弦；
电影：字符串[]；
}
@组成部分({
选择器：“人员详细信息”，
模板：'Details
姓名：{{{person.Name}
质量：{{{person.Mass}
高度：{{{person.height}
'
//展示个人电影
})
导出类PersonDetails2组件实现OnInit、OnDestroy{
人:人,；
分：任何；
电影详情：任何；
私有baseUrl:string='1！'http://swapi.co/api/people/1/';
构造函数（专用http:http）{
log（'PersonDetails2Component构造函数'）；
}
恩戈尼尼特（）{
console.log（'ngOnInit'）；
this.http.get（this.baseUrl，{headers:this.getHeaders（）}）.map（（res:Response）=>{
this.person=res.json（）.results.map（toPerson）；
console.log（“this.person”）；
把这个人还给我；
})
.flatMap（（person）=>this.http.get（person.films[0]））.map（（res:Response）=>res.json（））
.subscribe（res=>this.filmdetails=res）；
}
恩贡德斯特罗（）{
此.sub.取消订阅（）；
}
私有getHeaders（）{
let headers=新的headers（）；
headers.append（'Accept'，'application/json'）；
返回标题；
}
}
职能人员（r:任何）：人员{
让人=({
id:extractId（r），
姓名：r.name，
质量：r.mass，
高度：r.高度，
性别：r.gender，
电影：r.films
});
log（'person parsed='，person）；
返回人；
}
函数提取ID（personData:any）{
让extractedId=personData.url.replace（'http://swapi.co/api/people/“，”。替换（“/”，”）；
返回parseInt（extractedId）；
}

---

任何帮助都将不胜感激。

什么不起作用？实际行为是什么？预期的行为是什么？嗨，预期的行为将显示人物的细节以及电影的细节。这些信息可从API获得。现在我收到以下消息：异常：未捕获（承诺中）：错误：./PersonDetails2Component类PersonDetails2Component-内联模板中的错误：0:38原因：无法读取未定义的属性“name”。来自我的代码：this.http.get（person.films[0]）。而且，我不知道如何获得所有的电影；所以我只得到第一个