当Angular NGX Datatable显示“数据未设置”时,通常是因为没有正确设置表格的数据源。以下是解决此问题的几种方法:
import { Component } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
data: any[];
constructor() {
this.data = [
{ Name: 'John Doe', Age: 30 },
{ Name: 'Jane Smith', Age: 25 },
{ Name: 'Bob Johnson', Age: 45 },
];
}
}
import { Component } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
data: any[];
constructor(private dataService: DataService) {
this.data = [];
this.dataService.getData().subscribe((response) => {
this.data = response;
});
}
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`,
})
export class ParentComponent {
data: any[];
constructor() {
this.data = [
{ Name: 'John Doe', Age: 30 },
{ Name: 'Jane Smith', Age: 25 },
{ Name: 'Bob Johnson', Age: 45 },
];
}
}
// 子组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-datatable',
template: `
`,
})
export class DatatableComponent {
@Input() data: any[];
}
通过检查以上几点,您应该能够解决“数据未设置”的问题,并正确显示数据。