Question

我是这个社区的新手，需要一些帮助。

我正在我的网站上加载一些数据（从Spring Boot加载的数据），但是当我在我的数据表中加载这些数据时，会显示它但没有加载数据信息。

问题可能是因为datatable是在服务器调用之前生成的，当我收到数据时显示的数据。

视觉形象问题：

我的Angular 4代码：

  export class ReportsComponent implements OnInit, AfterViewInit {

  reports: Report[];
  dtTrigger: Subject<Report> = new Subject();

  dtOptions: DataTables.Settings = {
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Buscar informe...",
        info: "Mostrando del _START_ al _END_ en un total de _TOTAL_ informes"
      },
    dom: '<"#customTable"<"top"fi>rt<"bottom"p>>'
  };

  constructor(private reportsService: ReportsService, private reportsEventService: ReportsEventsService, private modalService: NgbModal) { }

  ngOnInit() {
    this.reportsEventService.onReportsChanged.subscribe(reports => { 
      this.reports = reports;
    });
  }

  ngAfterViewInit(): void {
    this.dtTrigger.next();
  }

  ...

和HTML代码：

<table id="informesTable" datatable class="table row-border" [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Id</th>
      <th>CIP</th>
      <th>Género</th>
      <th>Fecha de nacimiento</th>
      <th>Último seguimiento</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
        <tr *ngFor="let report of reports">
            <td>{{report.id}}</td>
            <td>{{report.patient.cip}}</td>
            <td>{{report.patient.gender}}</td>
            <td>{{report.patient.birthdate | date: 'dd-MM-yyyy'}}</td>
            <td>{{report.patient.lastFollow | date: 'dd-MM-yyyy HH:mm'}}</td>
            <td class="float-right">
                <div class="dropdown" dropdown [dropdownToggle]="false">
                    <a dropdown-open>
                        <span>
                            <i class="fas fa-cog"></i>
                        </span>
                    </a>
                    <div class="pane-dropdown-menu">
                        <span>
                            <ul class="pane-dropdown-list">
                                <li><a routerLink="/app/reports/{{report.id}}/0">Edit</a></li>
                                <li><a style="color: red!important" (click)="openModal(report)">DELETE</a></li>
                            </ul>
                        </span>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

谢谢！

Angular-datatables错误加载数据

0 个答案: