在异步订阅中访问被订阅的Observable之前,需要确保Observable值已经被返回。这可以通过使用RxJs中提供的操作符处理Observable来解决。常见的操作符包括map、filter、mergeMap等。下面是一个使用map操作符来解决“Angular undefined value outside of subscribe”的示例代码:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-root',
template: `
{{message}}
`
})
export class AppComponent {
message: string;
ngOnInit() {
this.getMessage().subscribe((msg) => {
this.message = msg;
});
}
getMessage(): Observable {
return this.http.get('url/to/api')
.pipe(
map((response: any) => {
return response.message;
})
);
}
}
在这个示例中,我们使用了map操作符从HTTP响应中提取了一个名为“message”的字符串,然后返回了一个Observable。在ngOnInit函数中,我们异步获取了这个Observable,并在订阅的回调函数中将其值赋给了message变量。这样,我们就可以在模板中访问并显示message变量了。