TypeScript函数返回未定义

本文介绍了TypeScript函数返回未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

你好，我在下面的类中有一个方法:

Hello I have a method in a the class below:

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语句，它返回的是未定义的.它上面几行的console.log(data)返回我想要的值.我想知道为什么我变得不确定.这可能是一个范围界定的问题，但我似乎无法弄清楚.我可能忽略了一个简单的错误.有什么建议吗?

My issue is with the return statement, it is returning undefined. The console.log(data) a few lines above it returns the value I want. I am wondering why I am getting undefined. It might be a scoping issue but I cant seem to figure it out. Its probably a simple error I am overlooking. Any suggestions?

谢谢！

推荐答案

您正在使用 异步编程 ，您无法暂停代码的执行，以后您的订阅将得到解决，但您无法预测何时执行. subscribe外部的console.log()是在您的订阅被解决之前执行的，这是未定义的原因，而订阅被解决之后，将在订阅回调中调用console.log().请参考 此 ，以便更好地理解. 您可以做的是，可以将值存储在class属性中，然后在模板中访问它.

You are working with async programming you cannot pause the execution of the code and your subscription will be resolved in future but you cannot predict when. console.log() outside the subscribe is executed before your subscription is resolved that's why it's undefined and console.log() inside subscribe call back is invoked after the subscription is resolved.Refer this for better understanding. what you can do is You can store the value in a class property and access it in your template.

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处理程序，然后等待异步结果传递给调用者.

or you can use async pipe AsyncPipe accepts as an argument an observable or a promise, calls subscribe or attaches a then handler, then waits for the asynchronous result before passing it through to the caller.

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>

实时演示

LIVE DEMO