Question

我正在尝试从产品列表重定向到产品详细信息页面，但是我的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>

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

}

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

Answer 1

您忘了关闭锚标签中的routerLink。

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

添加结束语] 以及routerLink

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

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

1 个答案: