div ngIf, если коллекция пожарного магазина не возвращает ни одного документа

Question

Я работаю с AngularFire2, то, что я в основном пытаюсь сделать, это показать 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 ( асинхронный канал может справиться с задачей)

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