首页 > 解决方案 > this.table 在制作响应式数据表时未定义角度

问题描述

这是我的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>

标签: angular

解决方案


id="#exemple"

它应该是

#example

只是它。

请阅读角度指南


推荐阅读