如何在 Angular 12 中调用可扩展行内的组件

Question

我有一组数据需要在 table 中显示，对于相同的数据，我想在用户展开行时为其显示图形表示。我所取得的成就是 table 中包含一些数据的可扩展行。我的代码如下：

abc.component.ts

import * as $ from 'jquery';
import 'datatables.net';

@Component({
  selector: 'app-abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.scss']
})
export class AbcComponent implements OnInit {
  @ViewChild('dataTable', { static: false })
  table!: { nativeElement: any; };

  dataTable: any;
  agentStatsData: TableData[] = [];

  ngOnInit(): void {
    this.getAllStatsData();
  }

  getAllStatsData(): void {
    this.dataService.getStatsData()
      .subscribe((data) => {
        this.agentStatsData = data;
        this.initTableData();
      });
  }

  initTableData() {
    var demoTable = this.dataTable.DataTable({
      "data": this.agentStatsData,
      "columns": [
        { "data": "name" },
        { "data": "type" },
        { "data": "team" },
        { "data": "status" },
        { "data": "totalStudent" },
        { "data": "totalActive" },
        { "data": "totalInActive" }
      ]
    });

    // Row expanding functionality
    $('.dataTable tr').on('click', function () {
      var tr = this;
      var row = demoTable.row(tr);

      if (row.child.isShown()) {
        row.child.hide();
      } else {
        row.child(format(row.data())).show();
      }
    });

    function format(data: any) {
      return '<div>' +
        '<p>Active data: ' + data.totalActive + '</p>' +
        '<p>Inactive data: ' + data.totalInActive + '</p>' +
        '<p>Total: ' + data.totalStudent + '</p>' +
        '</div>';
    }
  }
}

abc.component.html

...
<table width="100%" #dataTable class="table datatable-show-all dataTable table-striped table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Team</th>
      <th>Status</th>
      <th>Total Student</th>
      <th>Active</th>
      <th>In Active</th>
    </tr>
  </thead>
</table>
...

可扩展行显示的是活动总数、非活动总数和学生总数，但我想加载图表而不仅仅是数字。

Answer 1

我使用了 material 数据 table 并发现 this link 有用。

如何在 Angular 12 中调用可扩展行内的组件

How to call a component inside a expandable row in Angular 12

datatable

angular-material

expandable-table

angular