Question

TypeScript 函数返回未定义

2018-05-31

9373

angular typescript

我在下面的类中有一个方法：

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) 返回了我想要的值。我想知道为什么我得到了未定义的值。这可能是一个范围问题，但我似乎无法弄清楚。我忽略了什么？

Answer 1

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

  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 或承诺作为参数，调用 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>

现场演示

Answer 2

 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 的承诺概念。