时间戳

首页 > 解决方案 > 获取 ID 并将页面重定向到产品详细信息时出现问题

angular - 获取 ID 并将页面重定向到产品详细信息时出现问题

问题描述

我正在尝试从产品列表重定向到产品详细信息页面，但我的 URL 重复了某些部分并获得了错误的 ID。

例子：

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

管理产品-component.ts

 export class AdminProductsComponent implements OnInit {
  products$;


  constructor(private productService: ProductService)  {
    this.products$ = this.productService.getAll();
  }

products.form.component

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

}

产品.服务

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

标签： angularfirebaseangular5

解决方案

你忘了关闭你routerLink的锚标签。

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

添加关闭]和周围routerLink

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

推荐阅读