Question

我正在尝试使用数据表进行分类操作。当我单击提交按钮进行创建时，它显示错误数据表中仅允许数组和可迭代项。控制台在component.html代码行

中显示错误。

component.html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" 
class="row-border hover"> //This is where the console shows error

<tbody>
  <tr *ngFor="let person of persons">
   <td>{{ person.id }}</td>
   <td>{{ person.name}}</td>
   </tr>
</tbody>

component.ts

 dtOptions: DataTables.Settings = {};
 persons: any = [];

 // We use this trigger because fetching the list of persons can be 
 quite long,
 // thus we ensure the data is fetched before rendering

 dtTrigger: any = new Subject();

 constructor(private Authentication:AuthService) { }


 ngOnInit(): void {

 this.getRolesFromServices();
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 4
};
this.Authentication.getRoleData()
  .map(this.extractData)
  .subscribe(persons => {
    this.persons = persons;
    // Calling the DT trigger to manually render the table
    this.dtTrigger.next();
  });

 }

 ngOnDestroy(): void {
 // Do not forget to unsubscribe the event
 this.dtTrigger.unsubscribe();
 }

 private extractData(res: Response) {
 const body = res;
 return body || {};
 }

我能够创建数据，并且确实添加了数据，但是它没有显示在页面中。仅当我刷新时才会显示。

Answer 1

如果getRoleData返回 null 或为空字符串，或者返回错误的结果extractData将返回对象而不是空数组

private extractData(res: Response) {
 const body = res;
 return body || {}; // this cause only arrays and iterables are allowed in datatable
 }

只需像这样更改

private extractData(res: Response) {
 const body = res;
 return body || [];
 }

数据表中仅允许数组和可迭代

1 个答案: