angular2访问服务返回的对象属性并将其分配给组件局部变量答案

【问题标题】：angular2 accessing and assigning object properties returned by service to component local variableangular2访问服务返回的对象属性并将其分配给组件局部变量
【发布时间】：2017-03-05 05:14:30
【问题描述】：

我的视频服务：

public getExercise(exerciseId): Observable<Exercise[]>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers, withCredentials: true });

        return this.http.get(this.base_url + exerciseId + '/', options)
        .map(this.extractData)
        .catch(this.handleError);
}

在我的模板中我有：

<!-- Show current level -->
<div align="center">
 <h6>Ihre aktuelle Intensitätsstufe ist {{intensity_level}}</h6>
</div>

<div *ngIf="showVideo" align="center" class="video-container">
        <iframe [src]="exercise_video_url | safe" frameborder="0" allowfullscreen></iframe>
</div>

还有我的组件：

export class VideoPage implements OnInit {

    exercise: Exercise[];
    errorMessage: string;

    public exercise_id: number;
    public intensity_level: number;
    public rating: number;
    public exercise_video_url: string;
    public current_date: string;


    constructor(public navCtrl: NavController, public navParams: NavParams, public videoService: VideoService) {

        console.log(this.navParams.get('exerciseId'));
        this.exercise_video_url='';

        this.exercise_id=this.navParams.get('exerciseId');

    }

    ngOnInit(){

        this.getExercise()
    }

    getExercise(){

        this.videoService.getExercise(this.exercise_id)
        .subscribe(
            exercise => {
                this.exercise = exercise;
                console.log(this.exercise[0].video_url)

            },
            error => {
                this.errorMessage = <any>error;
            });

        this.exercise_video_url=this.exercise[0].video_url;

    }   
}

但是，对象属性没有分配给我的局部变量，因此我可以将它们绑定到模板上。我的服务只返回一个对象，这就是我使用 this.exercise[0] 的原因，如果我尝试在 get() 之外编写同一行，它会给出编译错误（这似乎很明显）。这里应该做什么？

控制台行打印 url。

【问题讨论】：

更新VideoService的代码来了解你的服务是做什么的！
已更新视频服务

标签： angular typescript

【解决方案1】：

这里的问题是您在subscribe 函数之外分配视频网址。

getExercise(){

    this.videoService.getExercise(this.exercise_id)
    .subscribe(
        exercise => {
            this.exercise = exercise;
            console.log(this.exercise[0].video_url)
            // NEW LINE
            this.exercise_video_url=this.exercise[0].video_url;
        },
        error => {
            this.errorMessage = <any>error;
        });

    // OLD LINE
    // this.exercise_video_url=this.exercise[0].video_url;

}

【讨论】：

感谢它的工作！但是我在这里有一个问题：在订阅功能之外它应该可用，对吗？或者它不等待并简单地执行下面的代码（即在 subscribe 内部，它保证只有在值可用时才执行）？
它是异步的，它会运行，然后会回到subscribe函数，就像一个回调订阅。
非常感谢！帮助

【解决方案2】：

您没有将响应内容映射到所需的练习模型，如下修改您的服务

public getExercise(exerciseId): Observable<Exercise[]>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers, withCredentials: true });

        return this.http.get(this.base_url + exerciseId + '/', options)
        .map((response: Response) => <Exercise[]>response.json())
        .catch(this.handleError);
}

【讨论】：