Angular 6 Datatable обновляет данные в таблице после внешней фильтрации - PullRequest
0 голосов
/ 14 ноября 2018

Я пытаюсь отобразить строки в таблице после запроса. я вижу ответ в браузере и отправляю новые данные в ROWS: объект, но таблица не обновляет строки в таблице.

пример кода:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';

@Component({
  selector: 'app-NAME',
  templateUrl: './NAME.component.html',
  styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {

  dtOptions: DataTables.Settings = {};
  rows = [];

  dtTrigger: Subject<any> = new Subject();

  constructor(private XXXXXXXService: XXXXXXXService) { }

  ngOnInit(): void {
    this.rows.length = 0;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 25
    };
    this.class.getRows()
      .subscribe(rows => {
        console.log(rows);
        this.rows = rows;
        // Calling the DT trigger to manually render the table -- not working!!!
        this.dtTrigger.next();
      });
  }
  render_rows_filters(filter) {
    this.class.getRowsFiltered(filter).subscribe(
      rows => {
        this.rows = rows;
        this.dtTrigger.next();
      }
    );
  }
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

HTML

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
  <!--class="row-border table-bordered hover">-->
  <thead>
  <tr>
    <th>&nbsp;NAME</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of rows">
    <td>{{ row.Name }}</td>
  </tr>
  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

обновление данных
Нажать на кнопку нажать таблицу обновления таблицы

$('#Clienttbl').dataTable().fnClearTable();
0 голосов
/ 25 ноября 2018

Хорошо, Дело в том, что когда вы используете angular с компонентами и сервисами, один компонент не может объявить элемент DataTable другому компоненту, работающему на той же странице. решение было создать внешнюю (глобальную) службу и передать все переменные компонента. затем запустив все функции в Service с компонентными переменными и дочерними .

Спасибо всем ... =)

...