以角度将 Firebase observable 映射到模板

Question

I am failing to use Angular to iterate over a Firebase observable to receive only the users order history and output it to the template. I've gotten as far as changing switchMap to map which gets rid of the error but then I can't seem to access the data from the template like I am used to... I am new to this. Please find all necessary files and database structure below.

This code...

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

...is giving me this error...

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'.

... and I am at a total loss. If you have any suggestions I would be very appreciative. Thank you!

Here is my COMPONENT FILE:

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$);
    }
}

SERVICE FILE:

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);
    }

}

and MARKUP:

<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>

Answer 1

Queries can only be ordered by one method. This means you can only specify orderByChild, orderByKey, orderByPriority, or orderByValue.

if you want to use dynamic query: https://github.com/angular/angularfire2/blob/master/docs/rtdb/querying-lists.md

Remove the equalTo query from your service file.

SERVICE FILE:

 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');
}

}

Answer 2

I've tried a couple things now...

component file: orders; this.orders = authService.user$.map(u => orderService.getOrdersByUser(u.uid)).subscribe(); console.log(this.orders); markup: {{orders}}

browser result: [object Object]

And..

template: {{orders$ | async}

browser result: https://shopdb432.firebaseio.com/orders

Answer 3

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