Я пытаюсь перенаправить из списка продуктов на страницу сведений о продукте, но мой URL дублирует некоторые части и получает неправильный идентификатор.
пример:
/ cafe-c3c52.firebaseapp.com/admin/products/
, когда я нажимаю кнопку редактирования, URL-адрес меняется на /cafe-c3c52.firebaseapp.com/admin/products/%5B/admin/products/'%20,% 20p.key% 5D
admin-products.component.html
<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> </tr>
<td> {{p.key}}</td>
</tr>
admin-products-component.ts
export class AdminProductsComponent implements OnInit {
products$;
constructor(private productService: ProductService) {
this.products$ = this.productService.getAll();
}
products.form.компонент
export class ProductsFormComponent implements OnInit {
categories$;
product;
constructor(
private router: Router,
private route: ActivatedRoute,
private categoryService: CategoryService,
private productService: ProductService) {
this.categories$ = categoryService.getCategories();
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.productService.get(id).snapshotChanges().pipe(
take(1)).subscribe(p => this.product = p);
}
}
}
product.service
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private db: AngularFireDatabase) { }
getAll() {
return this.db.list('/products').snapshotChanges().map(
changes => {return changes.map(c => ({ key: c.payload, ...c.payload.val()}));
});
}
get(productId) {
return this.db.object('/products/' + productId);
}
}