一栏中的服务器端渲染和编辑按钮

Question

如果我只是使用普通的Ajax方法用数据填充表格，则可以使用render在最后一列中创建一个编辑按钮。但是，使用服务器端渲染不会在最后一列显示任何内容。我觉得这与传递给DataTables的空数据数组有关，以便可以使用Angular显示数据。

因此，我尝试在该列中使用routerRoute。但是，我得到了一个锚标签和不执行任何操作的文本。它甚至不会更改为链接颜色。

如何在仍使用服务器端数据渲染的同时在最后一列中渲染动态链接？

我的HTML：

<table id="myGroups" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Group Id</th>
      <th>Group Name</th>
      <th>Patch Status</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let group of groups">
      <td>{{group.id}}</td>
      <td>{{group.firstName}}</td>
      <td>{{group.lastName}}</td>
      <td><a routerLink="myApps" routerLinkActive="active">Manage</a></td>
    </tr>
    <tr *ngIf="groups?.length == 0">
    <td colspan="5" class="dataTables_no-data-available">No assigned groups found.</td>
  </tr>
  </tbody>
</table>

和我的TS：

import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTablesModule } from 'angular-datatables';
import { Router } from '@angular/router';

class Group {
  id: number;
  firstName: string;
  lastName: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
  selector: 'app-grid-mygroups',
  templateUrl: './grid-mygroups.component.html',
  styleUrls: ['./grid-mygroups.component.css']
})
export class GridMygroupsComponent implements AfterViewInit, OnInit {
  dtOptions: DataTables.Settings = {};
  groups: Group[];

  constructor(private renderer: Renderer, private router: Router, private http: HttpClient) { }

  ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'https://angular-datatables-demo-server.herokuapp.com/',
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.groups = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{
          data: 'id'
        }, {
          data: 'firstName'
        }, {
          data: 'lastName'
        }, {
          data: 'id'
        }, {
          data: 'id'
        }],
      columnDefs: [
        { "orderable": false, "targets": [3, 4] }
      ]
    }
  }

  ngAfterViewInit(): void {
    this.renderer.listenGlobal('document', 'click', (event) => {
      if (event.target.hasAttribute("actions-buttons")) {
        this.router.navigate(["/myApps/" + event.target.getAttribute("id")]);
      }
    });
  }
}