我的属性在 .ts 文件中未定义但.html文件有效的原因是什么

Question

我得到了一个angular应用程序，它正在从外部服务器加载数据。我的会话被完美加载，我可以通过HTML-view中的属性绑定来使用它们，但每当我尝试(例如(关于imgurl的注释行时，我的会话属性都是undefined。任何人都知道是什么原因造成的，或者我该如何解决这个问题。

export class SessionsComponent implements OnInit {
public sessions : ISession[] = [];
public ImgUrl : any;
constructor(private sessionService : SessionService) { }
ngOnInit(): void {
this.getSessions();
// this.ImgUrl = 'data:image/png;base64,' + this.sessions[0].sessionPhoto.image.data;
// console.log(this.sessions[0].session_name);
}
getSessions() {
this.sessionService.getSessions().subscribe(
data => {this.sessions = data},
err => console.error(err),
() => console.log('sessions loaded')

);

Answer 1

您的getSessions方法运行async，这意味着在您尝试访问它时它还没有完成。一个快速的解决方案可以是将您的注释代码移动到getSessions方法中，如下所示：

getSessions() {
this.sessionService.getSessions().subscribe(
data => {
this.sessions = data;
this.ImgUrl = 'data:image/png;base64,' + this.sessions[0].sessionPhoto.image.data;
console.log(this.sessions[0].session_name);
},
err => console.error(err),
() => console.log('sessions loaded')
);
}