AngularFire Quickstart 不从 Firestore 返回数据

Question

已执行 AngularFire Quickstart
按照5. Getting started with Firebase Authentication

当我设置我的 Firestore 规则以限制对经过身份验证的用户的读写访问时，我要么收到错误，要么一无所获。有关详细信息，请参阅 GitHub 存储库中的 Issue #2838。

我的环境是：

Angular CLI：12.0.1
节点：14.17.0
包管理器：npm 7.13.0
Angular火：6.1.5
Firebase：8.6.1
Firebase 工具：9.11.0
OS: Ubuntu 20.04.2 LTS (linux x64)

我的 Firestore 规则是：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null;
    }
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Fire Quickstart';
  userDisplayName: string | null = null;
  leagues$: Observable<any[]> = new Observable<any[]>();

  constructor(
    private firestore: AngularFirestore,
    public auth: AngularFireAuth) {}

  ngOnInit() {
    // Recommended in Firebase documentation
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.userDisplayName = user.displayName;
        this.leagues$ = this.firestore.collection('Leagues').valueChanges();
      } else {
        this.userDisplayName = null;
        this.leagues$ = new Observable<any[]>();
      }
    });
}
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

app.component.html

<div *ngIf="userDisplayName != null; else showLogin">
  <p>Hello {{userDisplayName}}.
    <button (click)="logout()">Logout</button>
  </p>
  <ul>
    <li *ngFor="let league of leagues$ | async">
      {{ league.name }} - {{ league.location }}
    </li>
  </ul>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

Answer 1

通过订阅 Observable 并更改我的模板以监视由订阅管理的数组来解决。我现在每次都获取数据。

这是经过更改的代码：

app.component.ts

...
export class AppComponent implements OnInit {
  title = 'Angular Fire Quickstart';
  theUser: firebase.User | null = null;
  leagueArray: Array<any> = [];   // Eliminated the Observable in favor of an Array

  constructor(
    private firestore: AngularFirestore,
    public auth: AngularFireAuth) {}

  ngOnInit() {
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.theUser = user;

        // Added the subscription and populated the array from there.
        this.firestore.collection('Leagues').valueChanges().subscribe((data) => {
          data.forEach((item) => {
            this.leagueArray.push(item);
          });
        });
      } else {
        this.theUser = null;
        this.leagueArray = [];
      }
    });
  }
...

app.component.html

<div *ngIf="theUser != null">
  <p>Hello {{theUser.displayName}}.
    <button (click)="logout()">Logout</button>
  </p>
  <ul>
    <!-- Watch the array instead of an Observable -->
    <li *ngFor="let league of leagueArray">
      {{ league.name }} - {{ league.location }}
    </li>
  </ul>
</div>

AngularFire Quickstart 不从 Firestore 返回数据

AngularFire Quickstart Not Returning Data From Firestore

node.js

firebase

google-cloud-firestore

angularfire