从服务获取数据后如何刷新数据表内联编辑器？

Question

我为我的数据表添加了内联编辑数据功能。我正在使用服务调用来获取最新数据，并使用 dtOptions 绑定到数据表。我正在使用数据表“”。最初为空的数据变量绑定。一旦我从服务中获取数据，我就会绑定到绑定（显示）良好的 dtOptions。但内联编辑不起作用。我不确定从服务中获取数据后如何将数据添加到编辑器。如果我添加 $.fn.dataTable.Editor 的访问实例。它只是不工作。请帮忙解决这个问题。

HTML

<table id='dtGrid' *ngIf="dtRendered" datatable [dtOptions]="dtOptions" class="row-border hover"></table>

脚本

 data = [];

renderDatatable(dtColumns, modelObjAttributes) {
    console.log('dtEditor', this.dtEditor);
    const colLenth = dtColumns.length;
    this.dtRendered = false;
    this.dtOptions = {
        dom: 'Bfrtip',      
        data: this.data,
        pageLength: 100,
        columns: dtColumns,
        columnDefs: [ {
          targets: colLenth,
          defaultContent: '',
          title: '<i class="fa fa-plus plusIcon"></i>',
          orderable: false
        }],
        paging: true,
        searching: true,
      //  ordering: true,
        info:     false,
        responsive: true,
        drawCallback: () => {
          const btnElement = this.dtTableId.nativeElement.querySelector('i.plusIcon');
          this.renderer.listen(btnElement, 'click', ($event) => {
              this.onClickPlusIcon(modelObjAttributes);
           });
        },
        scrollY: '500px',
      //  bSort: false,
        scrollCollapse: true,
        select: {
          style:    'os',
          selector: 'td:first-child'
         },
        buttons: [
          { extend: 'create', editor: this.dtEditor },
          { extend: 'edit',   editor: this.dtEditor },
          { extend: 'remove', editor: this.dtEditor }
          // { extend:  'pageLength', editor: this.dtEditor}
        ]
      };
    this.cdr.detectChanges();
    this.dtRendered = true;
    this.cdr.detectChanges();
    this.attachPlusIconClickEvent(modelObjAttributes);
    this.attachDtClickEvent();
}

// This method used to initialize the data table dyanamically
initializeDtEditor(dtColumns, modelObjAttributes) {
    this.dtEditor = new $.fn.dataTable.Editor({  
    data: this.data,
    table: '#dtGrid',
    idSrc: this.uniqueField,
    fields: this.dataTableFields,
    formOptions: {
      inline: {
        onBackground:  'blur',
        onBlur:        'close',
        onComplete:    'close',
        onEsc:         'close',
        onFieldError:  'focus',
        onReturn:      'submit',
        submit:        'changed',
        scope:         'row'
      }
    }
   });
   // this.cdr.detectChanges();
    this.renderDatatable(dtColumns, modelObjAttributes);
}


// This method to get the data from service if you see i'm binding the reponseData to dtOptions. It adding to the datatable but it's not allowing to edit(inline edit). with buttong edit it's working.

getData(modelName) {
  this.dtServiceService.readData(modelName).subscribe(responseData => {
   // console.log(JSON.stringify(data));   
   this.dtOptions['data'] = responseData;
   this.dtRendered = false;
   this.cdr.detectChanges();
   this.dtRendered = true;
   this.cdr.detectChanges();

  },
  error => {
    console.log('data is not getting!');
  });
}

Answer 1

Angular-datatables 提供了一个dtTrigger，您可以使用它来手动触发表格的呈现。

你需要做的是调用dtTrigger来手动渲染表格。

例子：

HTML：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
  <tr>
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let person of persons">
    <td>{{ person.id }}</td>
    <td>{{ person.firstName }}</td>
    <td>{{ person.lastName }}</td>
  </tr>
</tbody>
</table>

打字稿：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { Person } from '../person';

import 'rxjs/add/operator/map';

@Component({
  selector: 'app-angular-way',
  templateUrl: 'angular-way.component.html'
})
export class AngularWayComponent implements OnDestroy, OnInit {
  dtOptions: DataTables.Settings = {};
  persons: Person[] = [];
  // We use this trigger because fetching the list of persons can be quite long,
  // thus we ensure the data is fetched before rendering
  dtTrigger: Subject = new Subject();

  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.http.get('data/data.json')
      .map(this.extractData)
      .subscribe(persons => {
        this.persons = persons;
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();
      });
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

  private extractData(res: Response) {
    const body = res.json();
    return body.data || {};
  }
}