تایپاسکریپت - p.$key بازگردانی نشده در URL در انگولار ۸

فایل html من

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
</head>

</html>

<p> <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a> </p>

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

من میخواهم دادههای محصولات را یکی یکی بازیابی کنم. اما هر بار که روی ویرایش کلیک میکنم، مقدار undefined در URL برمیگردد. آیا کسی میتواند به من کمک کند که چگونه کلید را در انگولار از فایربیس بازیابی کنم؟ مثل اینکه چگونه دادههای کلید زیر را بازیابی کنم.

پاسخ شماره ۱

این به دلیل تغییرات بین دو تابع است: snapshotChanges() و valueChanges()، اولی میتواند شناسه منحصربهفرد فراهم کند اما دومی نمیتواند. بنابراین این را امتحان کنید،

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

و فایل تایپاسکریپت مرتبط باید تابعی شبیه به این داشته باشد,

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

یعنی از snapshotChanges() به جای valueChanges() استفاده کنید هر زمان که بخواهید کلیدها را به دست آورید.

پاسخ شماره ۲

اگر میخواهید گره والد را بازیابی کنید، باید از ویژگی key بدون $ استفاده کنید. بنابراین کارهای زیر را انجام دهید:

"['/admin/products/', p.key]"