从ngx-data-table中以角度显示用户详细信息 [英] show user details with selected from ngx-data-table at angular
本文介绍了从ngx-data-table中以角度显示用户详细信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据用户从数据表中的选择显示用户详细信息页面，这是下面的代码.它具有dashboard.component.ts，dashboard.component.html，userdetail.component.ts和userdetail.component.html.我想根据用户从数据表中的选择显示用户详细信息页面，这是下面的代码.它具有dashboard.component.ts，dashboard.component.html，userdetail.component.ts和userdetail.component.html.我想根据用户从数据表中的选择显示用户详细信息页面，这是下面的代码.这有dashboard.component.ts，dashboard.component.html，userdetail.component.ts和userdetail.component.html
I wanted to show user details page based on user selection from datatable here is my code below. this have dashboard.component.ts,dashboard.component.html, userdetail.component.ts and userdetail.component.html I wanted to show user details page based on user selection from datatable here is my code below. this have dashboard.component.ts,dashboard.component.html, userdetail.component.ts and userdetail.component.html I wanted to show user details page based on user selection from datatable here is my code below. this have dashboard.component.ts,dashboard.component.html, userdetail.component.ts and userdetail.component.html
dashboard.component.ts
export class DashboardComponent implements OnInit {
rows = [
{
id: "111000",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111002",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111003",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111004",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111005",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
}
];
constructor(private route:ActivatedRoute,private router:Router) {
}
ViewDetails(id){
this.router.navigate(['/user/detail'], { queryParams: { id: id } });
}
ngOnInit() {
}
}
dashboard.component.html
dashboard.component.html
<ngx-datatable
class="bootstrap selection-cell"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="entries != -1 ? entries:undefined"
[rows]="temp"
(activate)="onActivate($event)"
>
<!-- <ngx-datatable-column name="Id" prop="$key" ngx-datatable-cell-template>-->
<!-- <ng-template let-row="row" let-value="value">-->
<!-- <a (click)="editFunction(value.id)">{{value.name}}</a>-->
<!-- <a href="#" class="btn btn-round btn-warning btn-icon btn-sm edit" (click)="editFunction($event)"><i class="far fa-calendar-alt"></i></a>-->
<!-- </ng-template>-->
<!-- </ngx-datatable-column>-->
<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>
<ngx-datatable-column name="Accountnumber"></ngx-datatable-column>
<ngx-datatable-column name="Amount"></ngx-datatable-column>
<ngx-datatable-column name="Date"></ngx-datatable-column>
<ngx-datatable-column name="Sdcstatus"></ngx-datatable-column>
<ngx-datatable-column name="Opdstatus"></ngx-datatable-column>
<ngx-datatable-column name="Creditstatus"></ngx-datatable-column>
<ngx-datatable-column name="Overallstatus"></ngx-datatable-column>
<ngx-datatable-column [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
Actions
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
<a href="#/tables/ngx-datatable/" class="btn btn-round btn btn-info btn-icon btn-sm like"><i class="fas fa-eye"></i></a>
<a href="#" class="btn btn-round btn-warning btn-icon btn-sm edit" (click)="editFunction($event)"><i class="far fa-calendar-alt"></i></a>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
userdetail.component.ts
userdetail.component.ts
export class NgxDatatableComponent implements OnInit {
rows = [
{
id: "111000",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111002",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111003",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111004",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
},
{
id: "111005",
accountnumber: "112-123-100251",
amount: "1000",
date: "07/28/2020",
sdcstatus: "Regular",
opdstatus: "Success",
creditstatus: "Success",
overallstatus: "Success"
}
];
public id: string = "";
public subs$;
constructor(private toastr: ToastrService, private _route: ActivatedRoute) {
ngOnInit() {
this.subs$ = this._route
.queryParams
.subscribe((params) => {
this.id = params["id"];
this.rows.filter((row) => row.id === this.id );
console.log(this.id);
})
}
ngOnDestroy() {
if (this.subs$) {
this.subs$.unsubscribe();
}
}
}
userdetails.component.html
userdetails.component.html
<ngx-datatable
class="bootstrap selection-cell"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="entries != -1 ? entries:undefined"
[rows]="temp"
(activate)="onActivate($event)"
>
<ngx-datatable-column name="Name"></ngx-datatable-column>
<ngx-datatable-column name="Account"></ngx-datatable-column>
<ngx-datatable-column name="Amount"></ngx-datatable-column>
<ngx-datatable-column [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
Actions
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
<a href="#" class="btn btn-round btn btn-success btn-icon btn-sm like" (click)="editFunction($event)"><i class="fas fa-eye"></i></a>
<a href="#" class="btn btn-round btn-danger btn-icon btn-sm edit" (click)="deleteFunction($event)"><i class="fas fa-trash"></i></a>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
I wanted to show up the user details at userdetails.component . please help me how can i do this
推荐答案
在user-details.component中:
In user-details.component:
创建临时属性
public temp = [];
您没有为详细信息页面设置行，ngx-datatables期望"temp"属性绑定，将ngOnInit中的代码更改为:
You are not setting the rows for your detail page, ngx-datatables is expecting a "temp" property to bind to, change the code in your ngOnInit to:
this.subs$ = this._route
.queryParams
.subscribe((params) => {
this.temp = this.rows.filter((row) => row.id === params["id"] );
})
这篇关于从ngx-data-table中以角度显示用户详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
