Angular ngx数据表链接accountid到详细信息页面

Question

数据表对于数据表，此表有一些带有帐号和其他详细信息的静态数据此表行有一列带有查看行等操作，如果我单击按钮，将显示一个警报，其中包含以下等详细信息

userdetails.component.ts
rows: any = [
{
id: 0
name: "Chao Lee",
account: "112123100251",
office: "Edinburgh",
amount: "1000"
},
{
id: 1
name: "jan Lee",
account: "112123100251",
office: "Edinburgh",
amount: "1000"
}
]

这很好，但我想把这些数据显示到一个详细信息页面，就像如果用户点击表中的id，那么这将转到带有id的详细信息页面并显示详细信息一样。我已经这样做了

在component.html

<ngx-datatable-column name="id" prop="id">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<a class="btn" (click)="ViewDetails(row.id)">
{{row.id}} <!-- or {{value}} -->
</a>
</ng-template>
</ngx-datatable-column>

和

组件.ts

ViewDetails(valObj){
this.router.navigate(['/user/details/',valObj.id,{queryParams: {id: 
valObj.id}}]);
}

但这不是去细节，显示我错误

ERROR Error: The requested path contains 
undefined segment at index 1
at validateCommands (router.js:4403)
at Router.push../node_modules/@angular/router/fesm5/router.js.Router.navigate 
(router.js:4281)

请帮我修理

Answer 1

您正在通过row.id

<a class="btn" (click)="ViewDetails(row.id)">

然后尝试访问ViewDetails 中某个数字的id属性

ViewDetails(valObj){ ----> this is an id (a number, not an object so you can't access valObj.id)
this.router.navigate(['/user/details/',valObj.id,{queryParams: {id: 
valObj.id}}]);
}

只要改变一下"；valObj"；至"；id"；而不是"；valObj.id"；只需使用"；id"；

将ViewDetails重写为

ViewDetails(id){
this.router.navigate([`/user/details/${id}`);  // --> route param
}

编辑

有几种方法可以做到这一点：

路线参数方法：

在routing.module.ts中，这样写用户详细组件路由(如果用户是父路由，也可以，只需写：id param作为详细信息的参数(：

{ path: 'user/details/:id', component: YourDetailsComponent }

使用导航

ViewDetails(id){
this.router.navigate([`/user/details`, id]); 
}

在YourDetailsComponent组件中，注入ActivatedRoute:

private route: ActivatedRoute

和

this.route.snapshot.paramMap.get('id')

您将能够访问id

查询参数方法：

ViewDetails(id){
this.router.navigate([`/user/details`, {queryParams: { id: id }}]); 
}

您不需要在路由中使用：id，并且可以使用：访问查询参数

this.route.snapshot.queryParamMap.get('id')