显示从 angular 处的 ngx-data.table 中选择的用户详细信息

Question

我想根据用户从数据表中的选择显示用户详细信息页面，下面是我的代码。 这有 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

 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

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

用户详细信息.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

  <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 

Answer 1

在 user-details.component 中：

创建临时属性

public temp = [];

您没有为详细信息页面设置行，ngx-datatables 期望绑定到“temp”属性，将 ngOnInit 中的代码更改为：

this.subs$ = this._route
    .queryParams
    .subscribe((params) => {
        this.temp = this.rows.filter((row) => row.id === params["id"] );
    })