类型'void'上不存在属性'do'

Question

我正在尝试从服务中的Firebase检索数据并在组件中使用它以便在我的模板上显示数据。我正在使用Angularfire2和Firebase。

服务代码：

export class MaterialDataFirebaseService {

  constructor(private db:AngularFireDatabase) {

  }

  getData(group, endKey?) {
    let query = {
      orderByKey: true,
      limitToFirst: group
    };

    if(endKey) query['startAt'] = endKey;

    // tried the two commented blocks below, but gave errors

    // return this.db.list('/', {
    //   query
    // });

    // return this.db.list('/', ref => {
    //   let q = ref.limitTolast(25).orderByKey(true);
    //   return q;
    // });

    this.db.list('/', ref => 
    ref.orderByKey().limitToFirst(group))
    .valueChanges()
    .subscribe(materialData => {
      return materialData;
    });
  }
}

组件代码：

export class LibraryMaterialCardComponent implements OnInit {
  materials: Material[];
  firebaseData = new BehaviorSubject([]);

  group = 8;
  endKey = '';
  finished = false;

  constructor(private dataService:DataService, private _materialDataFirebaseService: MaterialDataFirebaseService) {

  }

  ngOnInit() {
    this.dataService.getMaterialData().subscribe((materials) => {
      this.materials = materials;
    });

   this.getFirebaseData();
  }

  onScroll() {
    this.getFirebaseData();
  }

  private getFirebaseData(key?) {
    if(this.finished) return;

    this._materialDataFirebaseService.getData(this.group + 1, this.endKey)
      .do(firebaseData => {
        this.endKey = _.last(firebaseData)['$key']
        const newData = _.slice(firebaseData, 0, this.group)
        const currentData = this.firebaseData.getValue;

        if(this.endKey == _.last(newData)['$key']) {
          this.finished = true;
        }

        this.firebaseData.next(_.concat(currentData, newData));
      })
      .take(1)
      .subscribe();
  }

}


interface Material{
  id: number,
  name: string,
  article_id: string,
  tags: object,
  state: string,
  gallery_image: string
}

我确实确保我正确地导入了一切，除了我在组件类中得到这个Property 'do' does not exist on type 'void'.之外，一切似乎都有效。

我想要做的主要想法是一次从一个批处理从firebase中检索数据，并在滚动事件上加载更多，以实现所谓的“无限滚动”以减少服务器负载。

Answer 1

Firebase API是异步的，这意味着它们在调用时会立即返回，并且您要查找的数据将在稍后的回调中可用。在您展示的代码中，您的回调是在闭包内尝试return materialData，这是不可能的。在代码中放入一些日志语句，您将看到getData函数在调用回调之前实际返回（未定义）。

最重要的是，你不能让异步调用同步，你永远不会想要，因为这会阻止你的代码并使你的应用程序变得笨拙。您需要按照预期的方式异步处理Firebase API。

要详细了解Firebase API为什么是异步的以及对它们的期望，read this blog。