标签: angularfire2

我正在使用AngularFire并在我的中启用了离线支持的持久性app.module.ts：

imports: [
   AngularFireModule.initializeApp(environment.firebase),
   AngularFirestoreModule.enablePersistence()
]

valueChanges()当我的应用程序启动时，我使用如下方式检索用户：

const doc: AngularFirestoreDocument<User> = this.myCollection.doc<User>(userId);

doc.valueChanges().pipe(take(1)).subscribe((user: User) => {
    console.log(user);
}, (err) => {
    console.err(err);
});

对我来说奇怪的是，如果我将来自其他来源的修改作为应用程序应用于数据库，例如，如果我将自己登录到 Google Firestore 控制台并手动修改用户数据中的值，则不会获取这些数据。

如果我重新启动应用程序，它将始终获取本地保留的数据，并且永远不会注意到这些值已更改。

如果我分别删除持久性，则enablePersistence()可以正确获取数据。

你知道问题的原因是什么吗？

在这种情况下我不应该使用吗valueChanges()？

或者发生这种情况是因为我只获取该值一次（请参阅take(1)），因此永远不会获取更新的值？

提前感谢您的帮助

我将 ionic 4 与 firebase/angularfire2 结合使用并使用signinwithemeailandpassword()方法进行身份验证，因此我需要在注册后检查用户第一次登录的时间，因此我发现 firebase 提供了该选项isNewUser

createUserWithEmailAndPassword()因此，使用isNewUser创建帐户时equal应该true是正常的！signinwithemeailandpassword()但是，无论是第一次登录还是第一次登录，登录时总是返回 false！

这是登录方法的代码：

 async login(form: NgForm) {

// checking if login is valid
if (form.invalid)
  return this.statusMessage.message('Validation error!');

console.log(this.user);

try {

  const results = await this._afAuth.auth.signInWithEmailAndPassword(this.user.email, this.user.password).then(
    user => console.log(user.additionalUserInfo.isNewUser)

  );
  // console.log(results);

} catch (error) {
  switch (error.code) {
    case "auth/user-not-found":
      this.statusMessage.message("Your email address is wrong! please try again");
      break;

    case "auth/invalid-email":
      this.statusMessage.message("You have enterd invalid email address");
      break;

    case "auth/wrong-password": …

AngularFire 身份验证防护文档显示了允许身份验证的不同方法。

仅管理员用户：

const editorOnly = pipe(customClaims, map(claims => claims.role === "editor"));

仅限自己：

const onlyAllowSelf = (next) => map(user => !!user && next.params.userId === user.uid);

我的问题是如何将编辑器/管理员或用户自己可以打开组件的两者结合起来。

我是 Angular 和 Firestore 的新手，并试图弄清楚如何将从 Firebase 接收到的数据直接转换为模型。这里最好的方法是什么？

目前我得到了数据，但看起来它没有被转换成 Blimp 对象。当我尝试在视图中调用 getImageUrl() 时，收到以下错误消息。

错误 TypeError: _v.context.$implicit.getImageUrl 不是函数

所以我的问题是：将这些可观察量转换为正确的本地模型的最佳和最干净的方法是什么？我期待标签默认投射它。

当前代码

自定义模型类

export class Blimp {


created_at: Date;
file_location: string;
id: string;

constructor() {
    console.log('OBJ');
}

getImageUrl() {
    return "https://*.com" + this.file_location;
}

}

服务等级

    import { Injectable } from '@angular/core';
import {Blimp} from '../models/blimp';
import { AngularFirestore } from '@angular/fire/firestore';
import {AngularFireStorage, AngularFireUploadTask} from '@angular/fire/storage';
import {Observable} from 'rxjs';
import {finalize} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BlimpService {

   blimps: …

我正在从事 Angular 10 项目，我还使用 firebase 托管和云 firestore （用于数据库）。我也在我的项目中使用 AngularFire。

我的项目已经能够从我的 firestore 集合中获取文档并显示它们（也可以编辑、删除和创建它们）。我还设置了身份验证，使用 AngularFireAuth 进行登录和注销。我还设置了路由防护，仅允许用户在登录后访问信息。

我发现 Firestore 也有规则，您应该设置它们以保护您的收藏。目前，我基本上没有规则（测试模式），但我想添加基本的“只有用户可以访问任何内容”规则，但遇到了问题。

我认为这就是问题所在，目前，登录我的应用程序后会将用户存储在本地存储中。我认为我需要以不同的方式存储它，以便我从之前给出的凭据重新登录，而不是仅仅检查是否有本地存储。仅ERROR FirebaseError: Missing or insufficient permissions当我的警卫检查本地存储以确保登录时，我才会收到错误，如果我先登录，则不会收到错误。

那么，我应该如何保存用户数据，以便不必在每次刷新时登录，但可以验证 Firebase 的身份验证？我知道我可以将电子邮件/密码存储到本地存储并检查以重新登录，但这对我来说似乎不安全。

我认为以上是问题所在，但不能100%确定。

这是我的 Firestore 规则：

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

这是我的身份验证服务（我在其中处理登录/注销并检查本地存储是否有用户）。

export class AuthService {
  constructor(private aFAuth: AngularFireAuth, public router: Router) {
    //I honestly don't …

我在 Angular/Fire 项目中使用 Firebase 模拟器套件，包括云函数模拟器。firebase 工具 9.23.1。打字稿版本 4.5.4。package.json主要属性是开发"main": "lib/index.js",环境是MacOS 12.1。

我跑去tsc -w观察函数项目的 src 文件夹并转换任何更改。然后我使用启动模拟器firebase emulators:start。模拟器套件启动成功，云函数使用启动时函数中包含的代码运行。

当我将对代码的更改保存到 /src 中的 .ts 文件中时，主文件夹中的 .js 文件会立即反映这些更改；tsc -w似乎正在按预期进行观察和转译。

但是当我之后调用模拟函数时，它们仍然运行保存和转换之前的旧代码。Cloud firestore的文档说：

注意：模拟器会自动重新加载您在活动会话期间所做的代码更改。如果您的代码需要转译（TypeScript、React），请确保在运行模拟器之前执行此操作。您可以使用 tsc -w 等命令在监视模式下运行转译器，以便在保存时自动转译和重新加载代码。

我不知道我在这里缺少什么。无论我使用脚本启动观察程序和模拟器还是手动启动，我都会得到相同的行为。我也尝试过使用firebase serve --only functionsandfirebase serve:shell没有运气。我需要使用一个标志firebase emulators:start来说服模拟器观察更改吗？

我迷失在可观察,承诺和状态的疯狂中.我需要帮助来解决这个问题.

我正在尝试使用Angularfire2模块在angular 2应用程序中实现注册/登录/注册功能.我从登录功能开始.我掌握了基础知识.我可以登录并重定向到新页面.到现在为止还挺好.在我的模板中,我正在检查用户是否已登录.这里开始麻烦了.我很难检查当前用户是否已登录.

Login.components.ts

import { Component, OnInit } from '@angular/core';
import {Validators, FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../auth.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form: FormGroup;
  error = false;
  errorMessage = '';

  constructor(private fb:FormBuilder, private authService:AuthService, private router:Router) {}

  ngOnInit() {
     this.form = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  onLogin() {
    this.authService.loginUser(this.form.value.email, this.form.value.password)
    .subscribe(
      () => this.router.navigate(['/'])
    )
  } …

我尝试用Angular 2学习可观察的编程但是我没有得到一个重要的观点 - 如何在模板级别的(click)事件中传入一个observable中的值(没有在TS文件中订阅observable和将可观察值转换为成员变量).

正如许多Firebase专家所说的那样"尽可能在angular2中使用| async并防止手动订阅!" - 不想手动订阅任务$并将其转换为数组的原因.

例如:

我在组件的TS文件中有这个:

task$: Observable<Task>;

this.task$ = this.tasksService.findTaskById(taskId);

在我的服务中,这是使用AngularFire调用firebase的代码,它返回一个observable:

import {Task} from "../model/task";
constructor(private db:AngularFireDatabase, @Inject(FirebaseRef) fb) {
   this.sdkDb = fb.database().ref();
}

findTaskById(id:string):Observable<Task> {

  return this.db.object('tasks/' + id).map(task => Task.fromJson(task));

}

在我的模板中,我可以使用异步管道在Angular2中使用没有问题的值,如下所示:

<md-card-title>{{(task$ | async)?.title}}</md-card-title>

但是我有一个按钮,需要在这个任务中的$ id值,如下所示:

<button md-button *ngIf="(authInfo$ | async)?.isLoggedIn()" (click)="deleteTask((task$ | async)?.$key)">Delete</button>

这不会起作用,因为click不允许在表达式中使用管道......而且我不想订阅任务$并将其转换为成员变量(最佳做法是保持任务$ for obserable style RXJS编程？!)

那么我如何得到$ key值,因为它最初不存在,我不能使用异步管道!？

我在Firebase中有一些简单的条目,如:

我想要的只是获取这些值(每个百分比)并将它们传递给一个名为labels的数组.这样我就可以在我的代码中使用该数组了.这是我的问题.

现在,对我而言,这似乎很容易,但显然不是.

首先我所面对的是示例中的@angularfire第5版差异(但在他们的GitHub文档中很容易理解).所以其次,我尝试获取数据:

this.items = db.list('/percentage').valueChanges();

所以我这样做并在控制台上查看它.

然后我查看关于SO的其他问题,第三,在示例中,我被告知'它的异步数据,所以你应该订阅它'我订阅并再次在控制台中记录它以查看我的数组的样子. 当然,在那之后我会查看更多的例子哦,事实证明我应该映射()它.然后我这样做

this.labels = db.list('/percentage').valueChanges().map(res => this.labels = res);

:

我没有得到任何错误,但我不知道如何将这些数据作为一个对我有用的数组.如果有人向我解释一个方法,我会很高兴.谢谢

我正在尝试获取我在firestore中创建的文档的时间戳,但我得到的是:

myService.ts

getDomiciliarios() {
this.domiciliarios = this.afs.collection('domiciliarios').snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data() as Domiciliario;
    const id = a.payload.doc.id;
    const date = firebase.firestore.FieldValue.serverTimestamp();
    return { id, ...data, date };
  });
});

return this.domiciliarios;
}

myComponent.ts

ngOnInit() {
const domiciliarios = this.fs.getDomiciliarios()
  .subscribe(data => this.dataSource.data = data, date => date);
}

myComponent.html

<ng-container matColumnDef="fecha">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Fecha </mat-header-cell>
  <mat-cell *matCellDef="let domiciliario"> {{ domiciliario.date }} </mat-cell>
</ng-container>

如果我之前创建了时间戳,我该如何打印该时间戳？