在模板上进行插值时，来自HTTP promise的组件类变量是未定义的

Question

我承诺从我的服务中返回一个对象

export class mma {
 age: number;
 name: string;
}
@Injectable()
export class MyService {
  constructor(private http: Http) { }
  getMessage(): Promise<mma> {
return this.http.get('/map-moving-agents')
           .toPromise()
           .then((res)=> {
             console.log(res.json().obj);
              return res.json().obj;
            })
           .catch(this.handleError);
}

我有一个组件类方法，它将返回的promise对象分配给我想在组件模板中插入的组件类/实例变量

export class mma {
 age: number;
 name: string;
}
@Component({
 moduleId:module.id,
 selector: 'map-moving-agents',
 template: '<p>{{msg.name}}</p>',
 providers: [ MyService ]
})

export class MapMovingAgents implements OnInit{

 msg : mma;

constructor(private myService: MyService ){}
getMessage(): void {
    this.myService.getMessage().then((res) => {     
         this.msg = res;
         console.log(this.msg.name);  
        })

}

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

我已经记录了＆＃39; this.msg＆＃39;在＆＃39; getMessage＆＃39;和承诺＆＃39;然后＆＃39;但是当我插入它时，＆＃39; msg＆＃39;像{{msg.name}}我得到的错误说不能读取属性＆＃39; name＆＃39;未定义的，

Answer 1

当Angular在值可用之前解析绑定时，您可以使用安全导航操作符来避免错误：

template: '<p>{{msg?.name}}</p>',

Answer 2

mma不应该定义两次，应该是interface

interface  mma {
 age: number;
 name: string;
}

还删除`provider：[MyService]＆＃39;来自创建多个服务实例的组件