Question

早上好，

我在实施ngx-datable主题方面遇到了麻烦，部分工作：material theme image example

当我检查控制台时，此消息显示“DevTools无法解析SourceMap：http://localhost/index.map”

我按照演示站点的建议实现了代码。

这很神秘，因为在源代码中存在页脚和图标。

如果有人知道如何正确实施，或者知道如何解决这个问题，那将是完美的。经过两天的搜索后，我再也没有想到了。

谢谢

这是我的代码：

它-home.component.ts

import { Component, OnInit, OnDestroy } from "@angular/core";
import { DemasyRequestService } from "../../shared/demasy-request.service";
import { Subscription } from "rxjs";

@Component({
  selector: "app-it-home",
  templateUrl: "./it-home.component.html",
  styleUrls: [
    "../../../../node_modules/@swimlane/ngx-datatable/release/index.css",
    "../../../../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
    "../../../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
    "./it-home.component.css"
  ]
})
export class ItHomeComponent implements OnInit, OnDestroy {
  public data = [];
  public columns = [];
  private dataSubscription: Subscription;

  constructor(private demasyRequestService: DemasyRequestService) {
    this.columns = [
      { prop: "Id" },
      { prop: "FirstName" },
      { prop: "LastName" },
      { prop: "ShortName" },
      { prop: "StartDate" }
    ];
  }

  ngOnInit() {
    this.dataSubscription = this.demasyRequestService.getEmployees().subscribe(
      data => {
        this.data = [...data.obj];
        console.log(data.obj);
      },
      error => {
        console.log(error);
      }
    );
  }

  ngOnDestroy() {
    this.dataSubscription.unsubscribe();
  }
}

它-home.component.html

<ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="100" [rowHeight]="'auto'"
  [trackByProp]="'updated'" [rows]="data" [columns]="columns">
</ngx-datatable>

如果我在公共文件夹中插入css代码，它会起作用，但它很糟糕。我认为这是webpack和源地图加载器的问题。我会尝试解决这个问题，但对webpack一无所知。

<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dev</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="/stylesheets/release/index.css">
    <link rel="stylesheet" href="/stylesheets/release/themes/material.css">
    <link rel="stylesheet" href="/stylesheets/release/assets/icons.css">
    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
</head>
<body>

<app-root>Loading ...</app-root>

<script src="/js/app/bundle.js"></script>
</body>
</html>

Angular 6 - Ngx Datable - 主题部分实现

0 个答案: