示例2 Firebase数据

Question

我想从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'])
   }

如果我查看consolelog，它会显示类别未定义：- Category is undefined

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

所以，请帮助我。

Answer 1

正如我之前尝试评论的那样，通常要做的是在每个项目下创建一个字段来保存我的密钥。这样，我就不需要经历在前端获得$ key的麻烦了。因此，如果您在每个产品下都有一个字段，那么.entry-content p:first-of-type img{ //your css }。

那么您的* ngFor可以与$key: 'Key_1Ceuejd完美配合。

也就是说，根据您所拥有的，您将需要做2次* ngFor才能获得结果。

首先，在组件类中设置变量p.$key以获取密钥。

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

objectKeys

示例2 Firebase数据

此示例使用firebase数据，您不需要两个* ngFors，而是通过产品密钥

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

获取产品详细信息。我想这就是您要寻找的。

firebaseData[key]

这是一个有效的示例：https://stackblitz.com/edit/angular-umpqyh

Answer 2

这是我经过研究后的答案，希望它也对您有用。

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

$ Key无法检索Firebase对象列表的特定ID

2 个答案:

示例2 Firebase数据