Question

您好，我在下面的课程中有一个方法：

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）返回我想要的值。我想知道为什么我会变得不确定。这可能是一个范围问题，但我似乎无法弄明白。它可能是一个我忽略的简单错误。有什么建议吗？

谢谢！

Answer 1

 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中的数据因为您正在使用对服务器或数据库的调用，所以使用observable来利用Angular的promise概念。

Answer 2

您正在使用 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>

<强> LIVE DEMO

typescript函数返回undefined

2 个答案: