标签: angularfire2

我有一个可观察对象的列表,我试图迭代以将列表对象属性与局部变量进行比较.

我可以在模板中循环遍历列表中的对象,但无法在组件逻辑中看到如何操作.

如何在模板外执行此操作？

这是我到目前为止最接近工作迭代器的方法.

constructor(af: AngularFire) {
    this.competitors = af.database.list('/competitors');
}
this.competitors.forEach(competitor) {
    console.log(competitor);
}

对不起如果这是一个构造不好的问题,我对Angular2和Firebase还是一个新手.

我正在尝试注销，然后导航到登录URL，但是此URL中的authguard阻止了登录的用户查看它，并且由于在解决诺言之前已到达第二行，因此您需要单击两次方法事件以使其起作用。

logout(){
    this.angularfire.auth.logout();
    this.router.navigate(['']);
  }

解决承诺后，是否可以在回调中实现router.navigate？我已经尝试了then（），但是我的语法不正确，或者验证类型有问题...

我正在尝试为我的组件编写单元测试，但我无法正确监视 AngularFire 类。

//Component

  import { AngularFire } from 'angularfire2';

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

    constructor(
      public angularFire: AngularFire
    ) { }

    ngOnInit() {
      this.angularFire.auth.subscribe(auth => {
        // do stuff
      });
    }
  }

我的测试很简单，我试图监视 Auth 类以转换订阅的模拟用户。

//Test
let AngularFireMocks = {
  auth: jasmine.createSpy('auth')
};

AngularFireMock.auth.and.returnValue(Observable.of({ uid: 'ABC123' }));

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        HeaderComponent
      ],
      providers: [
        {
          provide: AngularFire, …

我在 Firebase 中有一个集合，可能偶尔会被没有正确权限的用户访问。现在当这种情况发生时，我在控制台中收到一堆警告和未捕获的异常，似乎无法正确处理它们。我通常订阅这样的可观察对象：

this.af.database.object('/someLocation/abc').subscribe(obj => {
    // logic
});

在不放松安全规则的情况下，处理这些未处理异常的最佳方法是什么？

我开始学习angular2并使用ngrx/store(以前没有使用redux的exp)和firebase应用程序.现在,我无法理解如何在商店中存储firebase对象,数组和东西.我应该把它们按原样放在FirebaseListObservable商店里af.database.list('/items')吗？它看起来很合适(组件可以只做store.select('items'),模板可以订阅,对于突变,我仍然可以向商店发送事件,我会用减速器改变列表)但我的猜测是不是因为这个列表可以从商店外部变更(一些其他app用户订阅同一个列表).或者它应该取决于个案？

如果没有,我应该在哪里存储对该firebase对象的引用,以及我应该在商店中放置什么？

在使用 Firebase 作为后端开发 Angular 应用程序时，我想知道什么是最佳实践。大多数教程等不使用 firebase 调用作为服务，而是直接在组件中运行它们。这是您应该如何处理在 angular 中使用 firebase 的方式吗？因为我认为制作服务来获取/更新 Firebase 上的某些数据会更有用，因为它可以跨多个组件重复使用。

另外，如果您有关于使用 firebase 作为服务的任何文献或链接（angular4 和 Angularfire2），将不胜感激

在我缓慢地理解Angular等问题时，我的Visual Studio代码编辑器出现了一个错误，该错误似乎并不影响应用程序功能。

当我将鼠标悬停在HTML模板中的变量上时，会收到此弹出窗口

我的html模板到处都是与产品对象product.ETC相关的所有错误。

有人可以指出我正确的方向，以了解如何解密。

product-form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <div class="form-group">
              <label for="title">Title</label>
              <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
              <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                Title is required.
              </div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                  <div *ngIf="price.errors.required">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" …

在我的网站中，我想按名称显示项目列表。这些名称是可点击的，然后应该下载整个文档，您可以编辑和保存该项目。

目前我正在使用文档中描述的方式从我的 FireStore 查询收集数据：https : //github.com/angular/angularfire2/blob/master/docs/firestore/collections.md

  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;
  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }

问题是，我不希望或者对我的名单需要实时更新。所以 Observable 方法对我的应用程序没有意义。

我想出的唯一方法是我只使用 snapshotChanges 方法，并将其映射到一个数组，然后我将其分配给一个字段。然后映射函数，将 items 和 itemsCollection 字段设置为 null，这样它们就不会浪费更多的带宽。但这对我来说似乎不对。

有没有办法在 AngularFire 中只查询一次集合，最好使用查询参数，然后显示它？

我已经浏览了 Angularfirestores 文档，我觉得它没有得到很好的记录，所以我有这个问题需要解决，我试图从我的 firestore 中获取每个文档的唯一 ID。这是我的片段：

private businessCollection2: AngularFirestoreCollection<Ibusiness>;
businesses2: Observable<any>;

this.businessCollection2 = this.fb.collection('businesses');
this.businesses2 = this.businessCollection2.snapshotChanges();

this.businesses2.pipe(
       map(
         changes => {
       const data = changes.payload.data();
       const id = changes.payload.id;
       return {id, ...data};
    })).subscribe(changes => {
      console.log(changes.id);
    });

我在浏览器控制台中收到一条错误消息：

ERROR TypeError: Cannot read property 'data' of undefined
    at MapSubscriber.eval [as project] (app.component.ts:63)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.Subscriber.next (Subscriber.js:54)
    at eval (angularfire2.js:36)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4760)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at NgZone.run (core.js:4577)
    at SafeSubscriber.eval [as _next] …

我正在关注关于集合的firebase 文档，但在尝试检索具有文档 ID 的文档集合时，无法弄清楚为什么我的代码无法按照文档工作。

我的 IDE 显示以下错误：

类型“Action< DocumentSnapshot< any>>”上不存在属性“map”。

对于以下代码：

this.userDocRef = this.afs.doc<any>(`users/${user.uid}`);
this.userDoc$ = this.userDocRef.snapshotChanges().pipe(
  map(actions => {
    return actions.map(a => { // error throws here
      const data = a.payload.doc.data() as any;
      const id = a.payload.doc.id;
      return { id, ...data };
    })
  })
)

当我运行此代码时，出现以下错误：

错误类型错误：actions.map 不是函数

我如何重构它以使其正常工作？

"firebase": "^5.0.4"
"@angular/core": "^6.1.0"
"angularfire2": "^5.0.0-rc.10"