TypeScript函数返回未定义 [英] typescript function returning undefined

问题描述

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

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().
请参考

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

这篇关于TypeScript函数返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！