Question

我想在firebase中使用$key来路由链接。但是，在浏览完所有文档和论坛后，我得到的答案是使用object.$key来检索值。我使用它仍然会返回undefined。

<table class="table">
<thead>
    <tr>
        <th>Title</th>
        <th>Price</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let p of products$ | async">
        <td>{{ p.title }}</td>
        <td>{{ p.price }}</td>
        <td>
            <a [routerLink]="['/admin/products/', p.$key]">Edit</a>
        </td>
    </tr>
</tbody>

products$会返回AngularFireList

的观察值

products$;
constructor(private productService: ProductService) {
  this.products$ = this.productService.getAll().valueChanges();
}

这是产品服务定义。

export class ProductService {

constructor(private db: AngularFireDatabase) { }

  create(product) {
    return this.db.list('/products').push(product);
  }

  getAll() {
    return this.db.list('/products');
  }

  get(productId) {
    return this.db.object('/products/' + productId);
  }
}

我仍然不确定这有什么问题，因为它返回/admin/products/undefined

正如我在阅读时所读到的所有参考资料都使用此object.$key

Answer 1

AngularFire2 v5中不再存在

.$key。如果您需要使用密钥snapshotChanges() see our migration guide for more details。

constructor(private productService: ProductService) {
  this.products$ = this.productService.getAll().snapshotChanges();
}

然后在视图中使用有效负载：

<table class="table">
<thead>
    <tr>
        <th>Title</th>
        <th>Price</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let p of products$ | async">
        <td>{{ p.payload.val().title }}</td>
        <td>{{ p.payload.val().price }}</td>
        <td>
            <a [routerLink]="['/admin/products/', p.key]">Edit</a>
        </td>
    </tr>
</tbody>

或者您可以将快照更改映射到您更熟悉的结构中：

constructor(private productService: ProductService) {
  this.products$ = this.productService.getAll()
    .snapshotChanges()
    .map(s => ({"$key": s.key, ...s.payload.val()}))
}

使用object进行路由。$ key返回undefined - firebase

1 个答案: