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