Кнопка рендеринга и редактирования на стороне сервера в одном столбце - PullRequest
Новая
       22

Кнопка рендеринга и редактирования на стороне сервера в одном столбце

0 голосов
/ 29 июня 2018

Если я просто использую обычный метод Ajax для заполнения таблицы данными, я могу использовать render для создания кнопки редактирования в последнем столбце. Однако при использовании рендеринга на стороне сервера в последнем столбце ничего не отображается. Я чувствую, что это связано с передачей пустого массива данных в DataTables, чтобы Angular можно было использовать для отображения данных.

Итак, я попытался использовать routerLink в этом столбце. Однако я получаю тег привязки и текст, который ничего не делает. Он даже не меняется на цвет ссылки.

Как отобразить динамическую ссылку в последнем столбце, все еще используя рендеринг данных на стороне сервера?

Мой 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")]);
      }
    });
  }
}
...