Question

当我尝试访问DataTable ViewChild的dtInstance时，出现此错误：

ERROR TypeError：无法读取未定义的属性'then'

在组件中声明ViewChild：

@ViewChild('dtuser') dtuser: DataTableDirective;

破坏数据表实例的方法：

searchByCoid(term: string): void {
console.log("user: ",this.dtuser);

this.dtuser.dtInstance.then((dtInstance: DataTables.Api) => {dtInstance.destroy();});
this.getUsersByCoid(term.trim());
//this.getLoggedInCompanies(); 
}

Datatable对象到控制台的输出（调用上述方法时）：

user:  
ElementRef {nativeElement: table#DataTables_Table_0.row-border.hover.dataTable.no-footer}
nativeElement
:
table#DataTables_Table_0.row-border.hover.dataTable.no-footer
__proto__
:
Object

HTML

<table #dtcompany datatable [dtOptions]="dtOptionsComp" [dtTrigger]="dtTriggerCompany" class="row-border hover">
    <thead><tr><th>ID</th><th>Name</th></tr></thead>
    <tbody>
    <tr *ngFor="let d of companylist" (click)="selectCompany($event, d)" [class.highlighted]="d.highlighted">
    <td>{{d.id}}</td><td>{{d.name}}</td>
  </tr></tbody>
</table>

<h1>Select User to Modify</h1>
<table #dtuser datatable [dtOptions]="dtOptionsUser" [dtTrigger]="dtTriggerUser" class="row-border hover">
    <thead><tr><th>First Name</th><th>Last Name</th><th>Company ID</th><th>User ID</th><th>PAIOS Acct ID</th></tr></thead>
    <tbody>
  <tr *ngFor="let c of userlist">
    <td>{{c.firstname}}</td><td>{{c.lastname}}</td><td>{{c.companyId}}</td><td>{{c.user_id}}</td><td>{{c.PAIOS_acctid}}</td>
  </tr></tbody>
</table>

Answer 1

您需要使用@ViewChildren而不是@ViewChild：

module.exports = mongoose.model('atendimento', {
    id: String,
    id_atendimento: { type: Number, default: 0 },
    id_cliente: { type: Number, default: 0 },
    id_user: mongoose.Schema.Types.ObjectId,
    user_nome: String,
    cliente_nome: String,
    id_atendente: { type: Number, default: 0 },
    atendente_nome: String,
    atendente_imagem: String,
    setor: Number,
    descricao: String,
    status: String,
    date: { type: Date, default: Date.now },
    inicio: { type: Date, default: Date.now },
    fim: { type: Date, default: Date.now },
    update: { type: Date, default: Date.now }
});

Answer 2

使用DataTableDirective

@ViewChild(DataTableDirective) datatableElement: DataTableDirective;

示例：https://stackblitz.com/edit/datatable-destory

无法从ViewChild获取数据表实例

2 个答案: