Angular 改变角度布线有问题

一般来说，angular和js框架都是新的。我正在使用本教程：

我已经在我的机器上启动并运行了教程，但是现在我想更改URL参数以导航到“详细信息”，使其不是产品id（p.id），而是其他内容，比如产品名称。为了进行实验，我添加了一个JSON名称/值

“dname”：“带破折号的名称”

我在

products.ts中的产品现在看起来像这样

    { id: 1, name: 'Medavac Survival Kit', **dname: 'medavac-survival',** type: 'Camping Gear', status: 'In stock', price: 14.99, description: 'Comes in a waterproof case. Includes fire starter, compass, wire saw, emergency whistle, can opener, suture thread and needle, bandages and more!' },

在
selected product.pipe.ts
中，我将代码编辑为：

export class SelectedProductPipe implements PipeTransform {
    transform(allProducts: Product[], productId: string): any {
        return allProducts.filter(p => p.dname === productId);
    }
}

在
productlist.component.html
中，我将路由器链接更改为

[routerLink]="['/product-details', p.dname]"

在
productdetails.component.html
中，我将循环更改为

*ngFor="let p of (products | selectedProduct: dname)"

和
产品详细信息.component.ts
现在看起来如下所示：

export class ProductDetailsComponent implements OnInit, OnDestroy {

    private id: number;
    **private dname: string;**
    products: Product[];
    private sub: any;

    prodIdSnapshot: number;

    constructor(private productService: ProductService, private route: ActivatedRoute) {
        this.products = productService.getProducts();
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
          **this.dname = +params['dname'];**
        });
    }

但是我发现“详细信息”页面仍然为空，我在我的编辑器中为
product details.component.ts
（如上所述）得到了这个错误：

“类型'number'不能分配给类型'string'.ts（2322）。”

下面是stackblitz:
也许这会起作用：
this.dname=params['dname']。
因此，删除该行中的+符号。
也许这会起作用：
this.dname=params['dname']。
因此，删除该行中的+符号。
添加“+”将强制字符串作为数字

下面的代码片段应该可以

this.dname = params['dname'];

添加“+”将强制字符串作为数字

下面的代码片段应该可以

this.dname = params['dname'];

你能分享Stackblitz吗？这是Stackblitz：我没有看到任何例外。对不起，我不清楚。我想做的是：当用户点击一个产品时，比如“Medavac生存工具包”，它应该路由到product-details.component.html并获取相关数据。在stackblitz上，产品详细信息页面是空白的。你能分享stackblitz吗？这是stackblitz：我没有看到任何例外。对不起，我不清楚。我想做的是：当用户点击一个产品时，比如“Medavac生存工具包”，它应该路由到product-details.component.html并获取相关数据。在stackblitz上，产品详细信息页面是空白的。谢谢你的评论，但这似乎并没有解决我的问题。如果有帮助的话，我做了一个stackblitz：谢谢你的评论，但这似乎并没有解决我的问题。如果有帮助的话，我做了一个stackblitz：谢谢你的评论，但这似乎并没有解决我的问题。如果有帮助的话，我做了一个stackblitz：这是管道。您向其传递一个dName，并在筛选器中将其与id进行比较。如果您传递id或与dName进行比较，则会获得详细信息数据。因此，在product-detials-component.html中，使用
*ngFor=“let p of（products | selectedProduct:id）
，而不是
*ngFor=“let p of（products | selectedProduct:dname）
就是这样。非常感谢。当然，这是删除“+”符号和实际比较管道中相同数据的组合。谢谢你的帮助。谢谢你的评论，但这似乎并没有解决我的问题。如果有帮助的话，我做了一个stackblitz：这是管道。您向其传递一个dName，并在筛选器中将其与id进行比较。如果您传递id或与dName进行比较，则会获得详细信息数据。因此，在product-detials-component.html中，使用
*ngFor=“let p of（products | selectedProduct:id）
，而不是
*ngFor=“let p of（products | selectedProduct:dname）
就是这样。非常感谢。当然，这是删除“+”符号和实际比较管道中相同数据的组合。谢谢你的帮助。