标签: angularfire

我想使用 firebase 实时数据库为我的应用程序创建一个搜索功能，类似于 facebook 搜索。

我做了一些研究并承认 Firebase 实时无法使用“文本包含”进行搜索。但我相信必须有某种方法来实现它，例如组合 startAt 或 endAt。

我需要一些关于最佳实践的建议。

数据库结构将如下所示：

Restaurant
-->RandomID
---->name: 'Good Restaurant'
---->address:
---->desc:
-->RandomID
---->name: 'Dixon Lee Restaurant'
---->address:
---->desc:
-->RandomID
---->name: 'MCD'
---->address:
---->desc:

编辑 我不确定 startAt 和 endAt 如何工作。如果我使用 startAt(3) 是否应该返回 3 及以上？如果我将 startAt 与字符串一起使用会怎样？就像我遇到的下面的问题：

firebase.database().ref('/restaurants').orderByChild('name').startAt('Good').on('value',snap=>{
      console.log(snap.val())
    })

上述查询将返回：

我正在考虑使用 startAt/endAt 实现“文本包含”，它将找到以关键字开头/结尾的字段的特定值。不确定这是否是 startAt/endAt 的用法。

我的 firestore 文档中有一个布尔字段。我想按布尔值订购集合。与文档answer逻辑真与文档之前应该出现answer布尔值false。

   const item: AngularFirestoreCollection<any> =
       this.afs.collection(`items`,
          (ref) => ref.where('questionId', '==', questionId)
                      .orderBy('updatedAt', 'desc')
                      .orderBy('answer'));
   return item.valueChanges();

firestore中的物品按以下顺序排列

items = {[
 {
id: 1,
questionId: x1,
answer: false,
updatedAt: 848939
},
{
id: 2,
questionId: x2,
answer: false,
updatedAt: 848936
},
{
id: 3,
questionId: x3,
answer: true,
updatedAt: 848938
}
]}

查询完成后，我希望第三项位于索引 0...结果中的第一项。现在我只得到orderedBy updatedAt。

上面的查询没有给我上面要求的结果。我如何进行这样的查询？

我正在尝试让 firebase 在我的 Angular 8 应用程序上运行。

我删除了我的node_modules 运行 npm install 运行 npm install --save firebase @angular/fire 运行 npm run build

我收到以下错误

node_modules/firebase/nidex.d.ts(4396, 38) 中的错误：错误 TS1005：“;” 预期的

我尝试了其他帖子中的一些步骤，但尚未成功。任何帮助表示赞赏。

我的节点版本是v10.16.3

这是我的 package.json

   {
  "name": "material-dashboard-angular",
  "version": "2.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "5.2.9",
    "@angular/cdk": "5.2.4",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/material": …

"@angular/fire": "5.2.3", 
"firebase": "7.4.0",

注意：members是an array，0,1,2是map数据结构。

服务.ts

 getUserChatGroups(uid: string): Observable<DocumentChangeAction<MessageGroupMemberModel>[]> {
    return this.afs.collection<MessageGroupMemberModel>(`messageGroups`, ref => ref.where('members', 'array-contains-any', [uid])).snapshotChanges();
  }

页面.ts

 init(): void {
    const uid: string = this.authService.getUserUid();
    this.chatService.getUserChatGroups(uid).subscribe(res => {
      console.log(res);
    },
      err => console.log(err),
      () => console.log('request completed')
    );

  }

没有错误。但它不返回任何值。但它有价值。我的查询有问题吗？

我正在尝试使用电子邮件和密码注册用户。如果注册功能有效，则会向用户的电子邮件地址发送一封邮件，该邮件必须包含用户单击以确认电子邮件地址的链接。我尝试使用AngularFireAuth.auth.currentUser.sendEmailVerification()函数来执行此操作，但它不起作用：此版本的 AngularFire/Firebase 不支持此方法。你能帮助我吗 ？

import {Injectable, NgZone} from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';
import {first} from 'rxjs/internal/operators/first';
import * as firebase from 'firebase';
import {AngularFirestore} from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  public userId: string;

  constructor(
      private afAuth: AngularFireAuth,
      private afStore: AngularFirestore,
      public ngZone: NgZone
  ) { }

  getUser(): Promise<firebase.User>{
    return this.afAuth.authState.pipe(first()).toPromise();
  }
  loginWithEmailAndPassword(email: string, password: string): Promise<firebase.auth.UserCredential>{
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }
  async registerWithEmailAndPassword(email: string, password: string): Promise<firebase.auth.UserCredential>{
    const newUserCredential: firebase.auth.UserCredential = await this.afAuth.createUserWithEmailAndPassword(email, password); …

我知道如何在 Firestore 中读取和写入文档，但是如何在不删除/删除的情况下更新（）地图数组中的值和对象？如果需要，只需更改一个值。

我有一个包含 FormArray 的表单，可以在价目表上有更新时进行编辑。

product = {
  id: "product id",
  brand: "Brand Name",
  model: "This is the model of the brand"
  lists: [
    { location: "Location 1", price: "0.00" },
    { location: "Location 2", price: "0.00" }
  ]
}

组件.ts

    export class PageComponent implements OnInit {
      productDoc: AngularFirestoreDocument<Product>;
      product: Observable<any>;
    }

constructor(private afs: AngularFirestore) {}

  update() {
    this.productDoc.update({ amount: this.updatedProduct });
  }

感谢您照亮它，谢谢！

在升级到 Angular 13 后，我刚刚将 Firebase+AngularFire 包从 7 升级到 9，调整了一些内容以使用@angular/fire/compat/*导入路径。

但我在几个地方使用了firebase.User，例如，基于 来初始化配置文件firebase.User：

private createProfile(user: firebase.User | null): UserProfile | null {
    if (!user) {
      return null;
    }
    return {
      displayName: user.displayName ?? '',
      email: user.email ?? '',
      photoURL: user.photoURL ?? '',
      uid: user.uid,
      userIncomplete: !user.displayName || !user.email || !user.photoURL,
    };
  }

但现在它找不到firebase.User：

Error: src/app/auth/state/auth.service.ts:60:40 - error TS2694: Namespace '"/node_modules/firebase/app/dist/app/index"' has no exported member 'User'.

60   private createProfile(user: firebase.User | null): UserProfile | null …

当试图将angularfire注入我的应用程序时,我遇到了一个错误

Error: [$injector:unpr] Unknown provider: $firebaseProvider <- $firebase
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=NaNirebaseProvider%20%3C-%20%24firebase
at http://localhost:9000/bower_components/angular/angular.js:78:12
at http://localhost:9000/bower_components/angular/angular.js:3705:19
at Object.getService [as get] (http://localhost:9000/bower_components/angular/angular.js:3832:39)
at http://localhost:9000/bower_components/angular/angular.js:3710:45
at getService (http://localhost:9000/bower_components/angular/angular.js:3832:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3859:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3880:23)
at http://localhost:9000/bower_components/angular/angular.js:7134:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:913:26)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6579:13) angular.js:9778

感觉就像我已经尝试了包括角度firebase和angularfire库的顺序

在我的身体的尽头

  <script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script> …

我正在尝试使用angularfire初始化角度应用程序.我正在使用自耕农的角度生成器来创建一个新的角形脚手架.然后,我添加了firebase和angularfire CDN:

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

最后,我将firebase添加为app模块的依赖项:

angular
  .module('socialfictionApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

但是当我用grunt旋转应用程序时应用程序中断 - 视图不渲染,导航中断等等.但是一旦我firebase从应用程序模块中删除依赖项,一切正常.

编辑

在我的控制台中,我收到以下错误:

未捕获的ReferenceError:未定义angular> cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js:7

未捕获的对象localhost:9000/bower_components/angular/angular.js:3809

我想知道如何在存储到Firebase时构建Angular控制器中的实际推送和更新方法.目前我认为有很多重复的代码和糟糕的结构.它看起来像这样:

app.controller( "myController", [ "$scope", "$routeParams", function( $scope, $routeParams ) {
    $scope.id = $routeParams.id;
    $scope.save = function() {
        if( $scope.id ) {
            // Update
        }
        else {
            // Save
        }
    }
} ] );

更新和保存之间的唯一区别是用于使用Firebase存储数据的方法(推送/更新).否则,存储的对象几乎相同,并且回调的处理方式相同.这给了很多重复的代码.我如何以良好的方式构建这个以防止重复的代码？