我有一个新的 Angular 12 项目,我正在尝试在其中添加一个有角度的光滑网格。但是所有数据都堆积在其自身之上,如图所示。
我正在使用此处的代码,它显然是在创建表格,但没有对其进行样式设置。我还通过添加 ngx-translate/core 东西修复了控制台中的所有错误,但这并没有做任何事情。我从上午 10 点开始一直在做这件事,但没有得到任何结果。
这里是 html,再次取自上面的链接。
<div class="container">
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>
</div>
这里是 ts。同样,直接取自我发布的网站链接
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
{ id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
{ id: 'start', name: 'Start', field: 'start' },
{ id: 'finish', name: 'Finish', field: 'finish' },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
];
this.gridOptions = {
enableAutoResize: true, // true by default
enableCellNavigation: true
};
// fill the dataset with your data
// VERY IMPORTANT, Angular-Slickgrid uses Slickgrid DataView which REQUIRES a unique "id" and it has to be lowercase "id" and be part of the dataset
this.dataset = [];
// for demo purpose, let's mock a 1000 lines of data
for (let i = 0; i < 1000; i++) {
const randomYear = 2000 + Math.floor(Math.random() * 10);
const randomMonth = Math.floor(Math.random() * 11);
const randomDay = Math.floor((Math.random() * 28));
const randomPercent = Math.round(Math.random() * 100);
this.dataset[i] = {
id: i, // again VERY IMPORTANT to fill the "id" with unique values
title: 'Task ' + i,
duration: Math.round(Math.random() * 100) + '',
percentComplete: randomPercent,
start: `${randomMonth}/${randomDay}/${randomYear}`,
finish: `${randomMonth}/${randomDay}/${randomYear}`,
effortDriven: (i % 5 === 0)
};
}