gpt4 book ai didi

javascript - 将 Firebase 可观察到的 Angular 映射到模板

转载 作者:行者123 更新时间:2023-11-30 14:46:48 25 4
gpt4 key购买 nike

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

这段代码...

 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>

enter image description here

最佳答案

查询只能通过一种方法排序。这意味着您只能指定 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');
}

关于javascript - 将 Firebase 可观察到的 Angular 映射到模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48779487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com