Angular 6 - Ngx Datable - Тема реализована частично - PullRequest
Новая
       9

Angular 6 - Ngx Datable - Тема реализована частично

0 голосов
/ 13 июня 2018

Доброе утро,

У меня проблемы с реализацией тем с поддержкой ngx, они работают частично: Пример изображения темы материала

Когда я проверяю консоль, появляется это сообщение"DevTools не удалось проанализировать SourceMap: http://localhost/index.map"

Я реализовал код в соответствии с рекомендациями демонстрационного сайта.

Это загадочно, поскольку в исходном коде есть нижний колонтитул и значки.

Если кто-то знает, как правильно его реализовать, или у меня есть идея, как я могу решить эту проблему, это было бы идеально. У меня больше нет идей после двух дней поиска.

Спасибо

Вот мой код:

it-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();
  }
}

it-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код в общедоступной папке, но это отстой. Это проблема с веб-пакетом и загрузчиком исходных карт, я думаю. Я попытаюсь решить эту проблему, но ничего не знаю о веб-пакете. 

<!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>
...