javascript - angularjs获取后端数据后赋值给成员变量，前台console报成员变量undefined的错误

Question

angularjs获取后端数据后赋值给成员变量，前台console报成员变量undefined的错误，错误提示如下：

EXCEPTION: Error in ./ExerciseDetailComponent class ExerciseDetailComponent - inline template:3:12 caused by: Cannot read property 'name' of undefined

另一个错误提示

ORIGINAL EXCEPTION: Cannot read property 'name' of undefined

代码如下：

import { Component, OnInit } from '@angular/core';

import { Exercise } from './exercise'
import { ExerciseService } from './exercise.service'

@Component({
    selector: 'exercise-detail',
    templateUrl: './exercise-detail.component.html',
})
export class ExerciseDetailComponent implements OnInit {

    exercise: Exercise;

    constructor(private exerciseService: ExerciseService) {}

    getExercise(): void {
        this.exerciseService.getExercise().then(exercise => this.exercise = exercise);
    }

    ngOnInit(): void {
        this.getExercise();
    }
}

因为，错误代码提示是我exercise内的属性没有定义，所以我把上面exercise声明的代码改成如下代码就可以从后台拿到的数据赋值给exercise成员变量了，而且前台显示的数据也不是undefined，而是数据中获取的数据。虽然问题用这个方法可以解决，但是这样很影响代码可读性啊。

exercise: Exercise = {
        id: undefined,
        name: undefined,
        timerDuration: undefined
    };

我想知道这是什么原因造成的？理论上从后台拿到的数据已经开辟内存空间了，应该可以直接赋值给成员变量啊，并不用成员变量也初始化。
而且我另一个根据angular2官方教程写的component也是只声明了成员变量，并没有初始化，就可以得到后台的数据啊。

求解答

Answer 1

出现这个错误可能exercise 就已经是undefined 了吧，所以才没有name这个属性，才会报错，而不是exercise 的变量没有赋值