CODEWITHSUNDEEP
javascriptangularrxjsangular-cli
zhiqiang shu
zhiqiang shu

Reputation: 19

dynamic routeLink can not display URL

enter image description here

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


{
    path: 'admin/products',
    component: AdminProductsComponent,
    canActivate: [AuthGuard, AdminAuthGuard]
  },
  {
    path: 'admin/products/new',
    component: ProductFormComponent,
    canActivate: [AuthGuard, AdminAuthGuard]
  },
  {
    **path: 'admin/products/:id',**
    component: ProductFormComponent,
    canActivate: [AuthGuard, AdminAuthGuard]
  },

hello, friends!

u can see the blue word "Edit" below in the picture. i expect it to show amdin/product + 'URl' , but it turns out admin/product/undefined.

and aslo I give code above I writed for this function purpose, where is my problem ????

besides, i got no complian error both in cmd and chrome console.

Regards!

Upvotes: 0

Views: 67

Answers (1)

Ankit Prajapati
Ankit Prajapati

Reputation: 2820

In your edit link you are using p.key as shown below,

 <a [routerLink] = "['/admin/products/', p.key]" >Edit</a>

but in products array you are not getting key field in product object of that array. so p.key will be undefined

Upvotes: 1

Related Questions