0

我有一个新的 Angular 12 项目,我正在尝试在其中添加一个有角度的光滑网格。但是所有数据都堆积在其自身之上,如图所示。 怎么了

我正在使用此处的代码,它显然是在创建表格,但没有对其进行样式设置。我还通过添加 ngx-translate/core 东西修复了控制台中的所有错误,但这并没有做任何事情。我从上午 10 点开始一直在做这件事,但没有得到任何结果。

这是我的 angular.json: Angular.json

这里是 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)
  };
}
4

1 回答 1

0

是的,您确实缺少 Angular-Slickgrid 的正确 CSS 样式,您应该按照HOWTO - Step by Step Wiki 开始,在您的情况下是Step 3,您必须在 CSS 或 SASS 导入之间进行选择。

最好的开始方法是:

  1. 阅读HOWTO - 一步一步
  2. 和/或 git clone Angular-Slickgrid-Demos

我创建了很多 Wiki 和示例,因此首先咨询它们总是好的。

请注意,我是Angular-Slickgrid的作者

于 2021-11-23T17:00:28.400 回答