如何检查 Firestore 集合是否为空？答案

【问题标题】：How do I check if a Firestore collection is empty?如何检查 Firestore 集合是否为空？
【发布时间】：2018-08-09 03:33:45
【问题描述】：

我正在使用 Angular 和 Angularfire2。

我想检查 Firestore 集合是否为空。我正在制作一个待办事项应用程序，我想显示一个空状态容器作为Material guidelines 的一部分。

这是我的数据结构：

users/
  userID/
    todos/
      // etc.

我正在使用以下代码：

<div class="empty-state-container" *ngIf="isTodosEmpty">
    <div class="empty-state-div">
        <h2>All todos have been done!</h2>
        <p>Go reward yourself with exercising, reading or your favourite hobby.</p>
        <button mat-raised-button (click)="newTodo()" color="primary">Create a new todo</button>
    </div>
</div>

<!-- ... -->

我的组件：

export class MyComponent {
    isTodosEmpty: boolean;

    constructor(
        private fs: AngularFirestore,
        private afAuth: AngularFireAuth,
        // ...
    ) {
        afAuth.auth.onAuthStateChanged((user) => {
        if (user) {
            console.log(user);
            this.currentUser = user.uid;
            this.todosCollection = this.fs.collection(`users/${this.currentUser}/todos`);
            this.todos$ = this.todosCollection.snapshotChanges().map(actions => {
                return actions.map(a => {
                    const data = a.payload.doc.data() as TodoItem;
                    const id = a.payload.doc.id;
                    return { id, ...data };
                });
            });
        } else {
            console.warn('Current user doesn\'t exist yet!');
        }
    });
    }
}

【问题讨论】：

标签： angular firebase angular-material google-cloud-firestore

【解决方案1】：

您可以在模板中实现这一点

<ng-container *ngIf="todos$ | async; let todos; else nocontent">
    <div *ngFor="let todo of todos">
        {{todo | json}}
    </div>
</ng-container>
<ng-template #nocontent>
    <div class="empty-state-container">
        <div class="empty-state-div">
            <h2>All todos have been done!</h2>
            <p>Go reward yourself with exercising, reading or your favourite hobby.</p>
            <button mat-raised-button (click)="newTodo()" color="primary">Create a new todo</button>
        </div>
    </div>
</ng-template>

<ng-template #nocontent>这部分会显示todos$是否为空。

【讨论】：

这里的一个问题是如果集合的内容是空的，仍然会显示一个空白区域。如何解决？

【解决方案2】：

我设法按照@Hareesh 的回答解决了这个问题，但相反，我检查了todos$ Observable (Array) 的长度是否大于0，如果不是，它仍然会显示空状态容器：

<ng-template #emptystate>
    <div class="empty-state-container">
        <div class="empty-state-div">
            <h2>All todos have been done!</h2>
            <p>Go reward yourself with exercising, reading or your favourite hobby.</p>
            <button mat-raised-button (click)="newTodo()" color="primary">Create a new todo</button>
        </div>
    </div>
</ng-template>
<ng-container *ngIf="(todos$ | async)?.length > 0; else: emptystate">
    <!-- ... -->
</ng-container>

【讨论】：

这种方式也可以。为什么我选择上述方法是我可以在我的模板中多次使用let todos。如果我多次使用 observable todos$，我会遇到问题
@Hareesh 我实际上有一个<mat-nav-list> 用于所有待办事项。

【解决方案3】：

一个简单的答案：

<div *ngIf="( todos$ | async)?.length > 0">Populated</div>
<div *ngIf="( todos$ | async)?.length == 0">Empty</div>

您只想远离!( (todos$ | async)?.length > 0 )，因为这总是会在第二个（空）状态下启动它，然后在一秒钟后弹出时自动将其切换到填充状态。

【讨论】：