将 Angular 中的 Firebase 可观察对象映射到模板答案

【问题标题】：Mapping an Firebase observable in angular to the template将 Angular 中的 Firebase 可观察对象映射到模板
【发布时间】：2018-07-24 13:43:12
【问题描述】：

我未能使用 Angular 迭代 Firebase 可观察对象以仅接收用户的订单历史记录并将其输出到模板。我已经将 switchMap 更改为 map 以消除错误，但是我似乎无法像以前那样从模板访问数据......我是新手。请在下面找到所有必要的文件和数据库结构。

这段代码...

 this.orders$ = authService.user$.switchMap(u => orderService.getOrdersByUser(u.uid));

...给我这个错误...

Argument of type '(u: User) => Query' is not assignable to parameter of type '(value: User, index: number) => ObservableInput<{}>'.
  Type 'Query' is not assignable to type 'ObservableInput<{}>'.
    Type 'Query' is not assignable to type 'ArrayLike<{}>'.
      Property 'length' is missing in type 'Query'.

...我完全不知所措。如果您有任何建议，我将不胜感激。谢谢！

这是我的组件文件：

import { AuthService } from './../auth.service';
import { OrderService } from './../order.service';
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';

@Component({
    selector: 'app-my-orders',
    templateUrl: './my-orders.component.html',
    styleUrls: ['./my-orders.component.css']
})
export class MyOrdersComponent {
    orders$;

    constructor(
        private authService: AuthService,
        private orderService: OrderService) {

        this.orders$ = authService.user$.switchMap(u => orderService.getOrdersByUser(u.uid));
        console.log(this.orders$);
    }
}

服务文件：

import { AngularFireDatabase } from 'angularfire2/database-deprecated';
import { Injectable } from '@angular/core';
import { CartService } from './cart.service';

@Injectable()
export class OrderService {
    constructor(
        private db: AngularFireDatabase,
        private cartService: CartService
    ) { }
    getOrdersByUser(userId: string) {
        return this.db.list('/orders').$ref.orderByChild('userId').equalTo(userId);
    }

}

和标记：

<h1>Orders</h1>
<table class="table">
    <thead>
        <tr>
            <th>Customer</th>
            <th>Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let order of orders$ | async">
            <td>{{ order.shipping.name }}</td>
            <td>{{ order.datePlaced | date}}</td>
            <td>
                <a href="#">View</a>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： javascript angular firebase firebase-realtime-database observable

【解决方案1】：

查询只能通过一种方法排序。这意味着您只能指定 orderByChild、orderByKey、orderByPriority 或 orderByValue。

如果要使用动态查询：https://github.com/angular/angularfire2/blob/master/docs/rtdb/querying-lists.md

从您的服务文件中删除 equalTo 查询。

服务文件：

 import { AngularFireDatabase } from 'angularfire2/database-deprecated';
 import { Injectable } from '@angular/core';
 import { CartService } from './cart.service';

  @Injectable()
   export class OrderService {
    constructor(
     private db: AngularFireDatabase,
     private cartService: CartService
 ) { }
   getOrdersByUser(userId: string) {
    return 
 this.db.list('/orders').$ref.orderByChild('userId');
}

}

【讨论】：

该死，这并没有做到，但你可能解决了一个潜在的问题。感谢您的链接和您的帮助。还有其他想法吗？
您现在遇到的错误与上述相同还是不同？
我现在遇到了不同的错误。我拍了那个错误的快照，它在原始帖子的底部
你使用的这个 $ref 让我很困惑。你知道有什么好的文档吗？
观看本教程兄弟youtube.com/watch?v=cwqeyOFcaoA&t=171s

【解决方案2】：

我现在已经尝试了几件事...

组件文件：命令; this.orders = authService.user$.map(u => orderService.getOrdersByUser(u.uid)).subscribe(); 控制台.log(this.orders); 标记： {{订单}}

浏览器结果： [对象对象]

还有..

模板： {{订单$ |异步}

浏览器结果： https://shopdb432.firebaseio.com/orders

【讨论】：

【解决方案3】：

    getOrdersByUser(userId: string) {
    return this.db.list('/orders', ref =>
    ref.orderByChild('userId').equalTo(userId)).valueChanges();
  }

【讨论】：