为什么 Handsontable CSS 文件不适用于我的 Angular 前端？

Question

我正在尝试向我的 Angular 前端显示 Handsontable。我已经得到了在一个全新的 Angular 项目中工作的基本示例 https://handsontable.com/docs/angular-simple-example/，但是当我将确切的代码添加到我现有的 repo 时，我无法获得必要的 CSS 样式来应用.如果我在我的浏览器上检查来源，样式 sheet 被导入但样式没有应用到元素，导致位置不正确和扭曲 table.

这是源代码： table.component.html

<div>
   <hot-table
   [data]="dataset"
   [colHeaders]="true"
   [rowHeaders]="true"
   height="auto"
   licenseKey="non-commercial-and-evaluation">
   <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
   <hot-column data="name" title="Full name"></hot-column>
   <hot-column data="address" title="Street name"></hot-column>
   </hot-table>
</div>

组件：

import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
  selector: 'app-root',
  templateUrl: './table.component.html',
  styleUrls: ['./app.component.css']
})
class AppComponent {
  dataset: any[] = [
    {id: 1, name: 'Ted Right', address: 'Wall Street'},
    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
    {id: 3, name: 'Joan Well', address: 'Broadway'},
    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
  ];
}

样式

@import '~handsontable/dist/handsontable.full.css';

我将不胜感激任何帮助！

Answer 1

而不是在 styles.css / styles.scss 中导入它...通过将相关的 css 文件添加到 angular 中，将 CSS 添加到您的 angular 构建中angular.json

中的“样式”属性

这应该看起来像这样：

"styles": [
  "node_modules/handsontable/dist/handsontable.full.css",
  "src/styles.scss"
]

您需要重新启动 Angular 开发服务器才能使此更改生效。

注意：angular.json 中有 2 个“样式”属性 - 确保仅将其添加到第一个或两个。

为什么 Handsontable CSS 文件不适用于我的 Angular 前端？

Why are Handsontable CSS files not applying to my Angular Frontend?

css

angular

typescript

handsontable