div ngIf 如果 firestore 集合不返回任何文档

Question

我正在使用 AngularFire2，如果函数没有从某个集合返回任何文档，我基本上想要做的是显示一个 div，即零。如果你返回一个或更多的文档，这个 div 应该会消失。

我尝试了以下方法，但没有得到预期的结果：

service.ts

size: number;
contadorSize;

contadorEventosPropios() {
    const user = firebase.auth().currentUser;

    this.contadorSize  = this.afs
        .collection('eventos', ref => ref.where('autorId', '==', user.uid))
        .get().subscribe(snap => {
          this.size = snap.size;
          console.log(this.size);
        });
    return this.contadorSize;
}

component.ts

size: boolean;
contadorSize: number;

constructor( public fs: FirebaseService, private afs: AngularFirestore ) {}

ngOnInit() {
    this.contadorSize = this.fs.contadorEventosPropios();

    if (this.contadorSize === 0 ) {
        return this.size = true;
    } else {
       return this.size = false;
    }
}

component.html

<div *ngIf="size">
  ...
</div>

Answer 1

您没有正确处理异步调用。向所有变量添加类型是个好主意，这样更容易看出意图和出错的地方。

尝试将您的服务更改为：

contadorEventosPropios(): Observable<{ size: number; }> {
    const user = firebase.auth().currentUser;

    return this.afs
        .collection('eventos', ref => ref.where('autorId', '==', user.uid))
        .get();
}

你的组件类似于：

size: boolean;

constructor( public fs: FirebaseService, private afs: AngularFirestore ) {}

ngOnInit() {
    this.fs.contadorEventosPropios().subscribe(result => {
      if (result.size === 0 ) {
          this.size = true;
      } else {
         this.size = false;
      }
    });

Answer 2

您正在返回 Subscription 对象。您可以将其更改为：

service.ts

size: number;
contadorSize;

contadorEventosPropios(): Observable<number> {
    const user = firebase.auth().currentUser;

    this.contadorSize  = this.afs
        .collection('eventos', ref => ref.where('autorId', '==', user.uid))
        .get()
        .map(snap => { // instead of subscribe
          this.size = snap.size;
          console.log(this.size);
          return snap.size;
        });

    return this.contadorSize;
}

component.ts

size: boolean;
// contadorSize: number; // wrong
contadorSize: Observable<number>; // corrected

constructor( public fs: FirebaseService, private afs: AngularFirestore ) {}

ngOnInit() {
    this.contadorSize = this.fs.contadorEventosPropios();
    // removed
}

component.html（async pipe 可以解决问题）

<div *ngIf="(contradorSize | async) === 0">
  ...
</div>