【问题标题】：$Key is not working to retrieve specific id of list of firebase objects$Key 无法检索 firebase 对象列表的特定 ID
【发布时间】：2020-10-18 01:07:49
【问题描述】：

我想从我的 firebase 产品列表中呈现特定产品。

我无法在我的 firebase 列表中找到密钥：-

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

我的浏览器将我重定向到一个未定义的对象：

http://localhost:4200/admin/products/undefined

在这里发布我的 Firebase 列表：

Firebase List of Products

我的类别列表也遇到了同样的问题：-

这里是我使用的代码：-

 <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel name="category" id="category" type="text" class="form-control" required>
                  <option value=""></option>
                  <option *ngFor="let c of categories$ | async" [value]="c.$Key" >
                    {{ c.name }}
                  </option>
                </select>
                <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                  Category is required.
                </div>
              </div>  ....
              
              .....
              
   export class ProductFormComponent implements OnInit {

  categories$;

  constructor(private router: Router,
    categoryService: CategoryService,
    private productService: ProductService) {

    this.categories$ = categoryService.getCategories();
  }

  save(product) {
   this.productService.create(product);
   console.log(product)
  //  this.router.navigate(['admin/products'])
   }

如果我查看控制台日志，它会显示类别未定义：- Category is undefined

因此，当我使用类别创建产品时，即使我从下拉列表中选择了我的类别，我也无法找到类别键。

所以，请帮帮我。

【问题讨论】：

从您的 firebase 快照中，我没有在产品对象中看到任何 $key 字段。因此p.$key 将是undefined。您应该在产品对象调用中添加一个字段$key。
-LQU8HompwKex4icbWdO,-LQUTngLsCaVC3KUF-yn 这些是唯一的 id 或键。根据我的理解，当您创建对象时，这些键是自动创建的。对吗？如果我想访问该键或者我该怎么做。我也检查过以前的帖子，我注意到 $key 对他们来说效果很好，但在我的情况下它不工作。所以，请在这方面帮助我。

标签： angular firebase firebase-realtime-database

【解决方案1】：

这是我研究后的答案，希望对你也有用。

    <div class="form-group">
    <label for="category">Category</label>
    <select ngModel name="category" id="category" class="form-control">
        <option *ngFor="let c of categories$ | async" [value]="c.key">
            {{c.payload.val().name}}
        </option>
    </select>
</div>

export class ProductFormComponent implements OnInit {

  categories$;  

  constructor(categoryService: CategoryService, private productService:ProductService) {

    this.categories$ = categoryService.getCategories().snapshotChanges();
   }

【讨论】：

【解决方案2】：

正如我之前试图评论的那样，我通常做的是在每个项目下创建一个字段来保存我的密钥。这样我就不需要在前端获取 $key 了。所以如果你在每个产品下都有一个字段，$key: 'Key_1Ceuejd。

那么您的 *ngFor 将与 p.$key 完美配合。

也就是说，根据你所拥有的，你需要做 2 个 *ngFor 来达到你的结果。

首先，在您的组件类中设置一个变量objectKeys 以获取密钥。

然后在您的模板中，执行以下操作：

   <ng-container *ngFor='let key of objectKeys(products)'>
     <h2>key: {{key}}</h2>
     <tbody>
        <tr *ngFor='let p of products[key]'>
            <td>{{p.title}}</td>
            <td>{{p.price}}</td>
            <td>
                <a routerLink="'/admin/products/{{key}}">Edit {{key}}</a>
            </td>
        </tr>
     </tbody>
<ng-container>

示例 2 Firebase 数据

此示例使用 firebase 数据，您不需要两个 *ngFor，而是通过产品密钥 firebaseData[key] 获取产品详细信息。我想这就是你要找的。

<ng-container *ngFor='let key of firebaseObjectKeys(firebaseData)'>
     <h2>key: {{key}}</h2>
     <tbody>
       {{firebaseData[key] | json}}
        <tr *ngIf='firebaseData[key]'>
            <td><h3>{{firebaseData[key].slang}}</h3></td>
            <td>{{firebaseData[key].slangDefine}}</td>
            <td>
                <a routerLink="'/admin/products/{{key}}">Edit {{key}}</a>
            </td>
        </tr>
     </tbody>
</ng-container>

这是一个工作示例：https://stackblitz.com/edit/angular-umpqyh

【讨论】：