Angular - 如何在@tusharghoshbd ngx-datatable

如何解决Angular - 如何在@tusharghoshbd ngx-datatable

我在 Angular-12 中有一个项目，我正在使用 @tusharghoshbd ngx-datatable 来显示日期。

我有三个表：用户、公司和角色。一个用户可以拥有多个角色，但只能属于一个公司。用户是主表

我在 API JSON GET 请求中对此进行了整理，如下所示：

{
  "message": "You have successfully Retrieved User Detail","error": false,"code": 200,"results": {
    "user": {
      "id": 2,"company_id": 6,"first_name": "Ashar","email": "example@email.com","last_name": "Nelo","roles": [{
          "id": 4,"name": "HOD","guard_name": "api"
        },{
          "id": 6,"name": "Account Officer","guard_name": "api"
        }
      ],"company": {
        "id": 6,"name": "ABC Company","website": "https://mycompany.com",}
    },}
}

现在我尝试使用@tusharghoshbd ngx-datatable 在 Angular 中显示它

组件：

export class SiteInfoComponent implements OnInit {
  @ViewChild('actionTpl',{
    static: true
  }) actionTpl: TemplateRef < any > ;
  @ViewChild('addresstpl',{
    static: true
  }) addresstpl: TemplateRef < any > ;

  isLoading: boolean = false;
  options: any = {};
  userInfoList: any[] = [];
  columns: any = {};


  constructor(private userInfoService: SUserInfoService) {}

  ngOnInit(): void {
    this.isLoading = true;
    this.userInfoService.getAllUserDetail().subscribe(
      data => {
        this.userInfoList = data.results.users;
        console.log(data);
      },error => {
        this.isLoading = false;
      }
    );

    this.options = {
      loader: true
    };
    this.columns = [{
        key: 'id',title: '<div class="blue"><i class="fa fa-id-card-o"></i> ID</div>',width: 60,sorting: true,align: {
          head: 'center',body: 'center'
        },vAlign: {
          head: 'bottom',body: 'middle'
        }
      },{
        key: 'first_name',title: '<div class="blue"><i class="fa fa-user"></i> First Name</div>',width: 100
      },{
        key: 'last_name',title: '<div class="blue"><i class="fa fa-user"></i> Last Name</div>',{
        key: 'email',title: '<div class="blue"><i class="fa fa-phone"></i> Email</div>',align: {
          head: 'left'
        },width: 100,sorting: true
      },{
        key: '',title: '<div class="blue">Action</div>',sorting: false,width: 80,cellTemplate: this.actionTpl
      }
    ];
  }

  edit(row: any) {}

  remove(rowIndex: any) {}
}

html：

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns" [options]="options">
  <ngx-caption>
    <div class="row">
      <div class="col-sm-6 col-xs-6 col-6 ">
        <b>
                  <i class="fa fa-table" aria-hidden="true"></i>
                  Site Info. List
              </b>
      </div>
      <div class="col-sm-6 col-xs-6 col-6  text-right">
        <button type="button" class="btn btn-primary">
                      <i class="fa fa-plus" aria-hidden="true"></i> Add New Data
                  </button>
      </div>
    </div>
  </ngx-caption>



  <ng-template #addresstpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{columnValue.name}},{{columnValue.email}}
  </ng-template>
  <ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    <a href="javascript:void(0)" (click)="edit(row)">Edit</a> |
    <a href="javascript:void(0)" (click)="remove(rowIndex)">Delete</a>
  </ng-template>

</ngx-datatable>

这些工作正常。但在 @tusharghoshbd ngx-datatable 中， 我想包括公司和角色的相关字段。每个角色中的名称，以及 API 中显示的公司名称。

我如何实现这一目标？

谢谢

解决方法

问题和关注

想说明您正在访问 data.results.users，这对于您的 JSON 结果无效。

this.userInfoList = data.results.users;

{
  "message": "You have successfully Retrieved User Detail","error": false,"code": 200,"results": {
    "user": {
      ...
    },}
}

与此同时，因为您的 JSON 返回单个对象而不是数组。

问题解决方案：将单个对象转换为数组

site-info.component.ts

this.userInfoList = [data.results.user];

问题的解决方案

要显示每个角色的公司名称和名称，您可以使用 cellTemplate。

site-info.component.html

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns"
  [options]="options">
  ...

  <ng-template #companyTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{columnValue.name}}
  </ng-template>

  <ng-template #rolesTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    <ng-template ngFor let-obj [ngForOf]="columnValue">
      {{obj.name}}
      <br />
    </ng-template>
  </ng-template>

</ngx-datatable>

site-info.component.ts

export class SiteInfoComponent implements OnInit {
  ...

  @ViewChild('companyTpl',{
    static: true
  })
  companyTpl: TemplateRef<any>;
  @ViewChild('rolesTpl',{
    static: true
  })
  rolesTpl: TemplateRef<any>;

  ...

  ngOnInit(): void {
    ...

    this.columns = [
      ...
      {
        key: 'company',title: '<div class="blue">Company</div>',align: {
          head: 'left'
        },width: 100,sorting: true,cellTemplate: this.companyTpl
      },{
        key: 'roles',title: '<div class="blue">Roles</div>',cellTemplate: this.rolesTpl
      },...
    ];

    this.userInfoService.getAllUserDetail().subscribe(
      data => {
        this.userInfoList = [data.results.user];
        console.log(data);
      },error => {
        this.isLoading = false;
      }
    );
  }
}

Sample Solution on StackBlitz