$ Key не работает для получения определенного идентификатора списка объектов Firebase

Question

Я хочу отобразить конкретный продукт из списка продуктов 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

Также я столкнулся с такой же проблемой со списком категорий: -

вот код, который я использовал: -

 <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, он покажет категорию Undefined: - Категория не определена

Поэтому, когда я создаю продукт, используя категорию, я не могу найти ключ категории, хотя я выбрал свою категорию из выпадающего списка.

Итак, пожалуйста, помогите мне с этим.

Answer 1

Как я уже пытался комментировать ранее, я обычно создаю поле под каждым элементом для хранения моего ключа. Таким образом, мне не нужно проходить через обруч, чтобы получить ключ $ в передней части. Так что, если у вас есть поле под каждым продуктом, как так, $key: 'Key_1Ceuejd.

Тогда ваш * ngFor отлично бы работал с p.$key.

Тем не менее, с тем, что у вас есть, вам нужно будет сделать 2 * ngFor's для достижения вашего результата.

Сначала установите переменную 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 вам не понадобятся два * ngFors, скорее вы получите информацию о продукте по ключу продукта 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