您好,我在下面的课程中有一个方法:
export class SearchService {
userUID: string;
searchItems: any;
private searchesCollection: AngularFirestoreCollection;
constructor(
private db: AngularFirestore,
private afAuth: AngularFireAuth,
) {
}
getSearches() {
this.afAuth.authState.subscribe(user => {
this.userUID = user['uid'];
this.searchesCollection = this.db.collection(`users/${this.userUID}/searches`);
this.searchItems = this.searchesCollection.valueChanges().subscribe(data => {
console.log(data); // works
return data;
});
});
console.log(this.searchItems); // undefined
return this.searchItems; //undefined
}
}
我的问题是return语句,它返回undefined。它上面几行的console.log(data)返回我想要的值。我想知道为什么我会变得不确定。这可能是一个范围问题,但我似乎无法弄明白。它可能是一个我忽略的简单错误。有什么建议?
谢谢!
您正在使用async programming ,您无法暂停代码的执行,您的订阅将在未来解决,但您无法预测何时。 console.log()
之外的subscribe
在您的订阅被解决之前执行,这就是为什么它未定义
在订阅解决后调用并在订阅回调中调用console.log()
。
请参阅this以获得更好的理解。
您可以做的是您可以将值存储在类属性中并在模板中访问它。
getSearches() {
this.afAuth.authState.subscribe(user => {
this.userUID = user['uid'];
this.searchesCollection = this.db.collection(`users/${this.userUID}/searches`);
this.searchesCollection.valueChanges().subscribe(data => {
console.log(data); // works
this.searchItems=data;
});
});
console.log(this.searchItems); // undefined
return this.searchItems; //undefined
}
HTML
{{searchItems?.//property}}
或者你可以使用async pipe
AsyncPipe接受observable
或promise作为参数,调用subscribe
或附加一个then处理程序,然后在将其传递给调用者之前等待异步结果。
getSearches() {
this.afAuth.authState.subscribe(user => {
this.userUID = user['uid'];
this.searchesCollection = this.db.collection(`users/${this.userUID}/searches`);
this.searchItems=this.searchesCollection.valueChanges();
}
HTML
<ng-container *ngFor="let item of searchItems|async">
{{item?.//property}}
<ng-container>
getSearches() {
this.afAuth.authState.subscribe(user => {
this.userUID = user['uid'];
this.searchesCollection = this.db.collection(`users/${this.userUID}/searches`);
this.searchItems = this.searchesCollection.valueChanges().subscribe(data => {
console.log(data); // works
return data;
});
});
console.log(this.searchItems); // undefined
return this.searchItems; //
这里有一个异步调用。由于您在调用解析或返回之前返回值,因此您将无法使用this.searchItems
中的数据,因为您正在使用对服务器或db的调用,请使用observable来利用Angular的promise概念。