Angular - 如何在@tusharghoshbd ngx-datatable 中显示相关字段

Question

我在 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>',
        width: 100
      },
      {
        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>',
        align: {
          head: 'center',
          body: 'center'
        },
        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>

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

我如何做到这一点？

谢谢

Answer 1

问题和关注

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

this.userInfoList = data.results.users;

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

同时，由于您的 JSON 返回单个对象而不是数组。

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

网站信息.component.ts

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

---

问题解决方案

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

网站信息.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>

网站信息.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>',
        align: {
          head: 'left'
        },
        width: 100,
        sorting: true,
        cellTemplate: this.rolesTpl
      },
      ...
    ];

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

Sample Solution on StackBlitz