Question

这是我的 datatable.component.ts

import { Component,AfterViewInit, OnDestroy,ElementRef, ViewChild, OnInit } from '@angular/core';
    declare var $;
    import { Http, Response } from '@angular/http';
    import { Subject } from 'rxjs';
    import { Subscription } from 'rxjs';
    import {Users} from '../user.model';
    import { MatPaginator, MatSort } from '@angular/material';
    import { HttpClient } from '@angular/common/http';
    import { EventsService } from '../events.service';
    @Component({
      selector: 'app-datatableslibrary',
      templateUrl: './datatables.component.html'
    })
    export class DatatableslibraryComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild('example') table:ElementRef; 
    example:any;
      users: any[] = [];
      dtOptions: DataTables.Settings = {};
      dtTrigger: Subject<any> = new Subject();
      private eventsSub: Subscription;


      /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

      totalUsers =0; 
      constructor(private http: HttpClient,  public eventsService: EventsService) {
      }
    ngAfterViewInit() {
         this.example = $(this.table.nativeElement);
         this.example.DataTable();
    }

这表明this.table是不确定的。我不知道我在哪里做错了，甚至不知道这是否是制作响应式数据表的正确方法。我的静态数据表已经形成，任何其他建议都会感谢。

这是我的 datatable.component.html ，我想在Angular中设计响应式数据表。

<table id="#exemple" class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>PhoneNum</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.firstName }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.phoneNum }}</td>
    </tr>
  </tbody>
</table>

Answer 1

id="#exemple"

应该是

#example

只是。

请阅读Angular Guide。

使响应数据表时this.table在角度上未定义

1 个答案: