angular - 在 Angular 中使用 ngx-datatable 时出现 Httpclient 错误

问题描述

我正在尝试在我的角度项目中使用 ngx-datable，但我在我的角度项目中看到以下错误。我不确定确切的错误是什么意思。但是，我不确定如何解决它。我附上了我在下面更改的所有文件。ng new randomName您可以通过使用并运行创建新的角度项目npm install @swimlane/ngx-datatable --save然后更改/添加以下文件来复制错误。请帮忙，有什么问题吗？谢谢

Error: node_modules/@angular/common/http/http.d.ts:81:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common/http) which declares HttpClient has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version 
of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

81 export declare class HttpClient {
                    ~~~~~~~~~~

这是我的 app.module.ts：

import { HttpClient,HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxDatatableModule,
    HttpClient,
    HttpClientModule
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件：html：

<ngx-datatable 
      class="material"
      [limit]="8" 
      [rows]="rows" 
      [rowHeight]="50" 
      [columns]="columns"
      [columnMode]="'force'" 
      [sortType]="'multi'" 
      [headerHeight]="50" 
      [footerHeight]="50">
</ngx-datatable>

App.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// import { ViewEncapsulation } from '@angular/core';

export interface Data {
  dummyData: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
  // ,encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {

  public data: Data;
  public columns: any;
  public rows: any;

  constructor(
    private http: HttpClient
  ) {
    this.columns = [
      { name: 'Name' },
      { name: 'Company' },
      { name: 'Genre' }
    ];

    this.http.get<Data>('../../assets/dummyData.json')
      .subscribe((res) => {
        console.log(res)
        this.rows = res.dummyData;
      });
  }

  ngOnInit() {
  }

dummyData.json：

{
    "dummyData": [
        {
            "name": "Escape Room",
            "company": "Columbia Pictures",
            "genre": "Horror"
        },
        {
            "name": "Rust Creek",
            "company": "IFC Films",
            "genre": "Drama"
        },
        {
            "name": "American Hangman",
            "company": "Hangman Productions",
            "genre": "Thriller"
        },
        {
            "name": "The Upside",
            "company": "STX Entertainment",
            "genre": "Comedy"
        },
        {
            "name": "Replicas",
            "company": "Entertainment Studios",
            "genre": "Sci-Fi"
        },
        {
            "name": "After Darkness",
            "company": "Grindstone Group",
            "genre": "Drama"
        },
        {
            "name": "Glass",
            "company": "Universal Pictures",
            "genre": "Superhero"
        },
        {
            "name": "Close",
            "company": "Netflix",
            "genre": "Action"
        },
        {
            "name": "The Final Wish",
            "company": "BondIt Capital",
            "genre": "Horror"
        },
        {
            "name": "Serenity",
        "company": "Aviron Pictures",
        "genre": "Drama"
    },
    {
        "name": "Miss Bala",
        "company": "Columbia Pictures",
        "genre": "Thriller"
    },
    {
        "name": "Velvet Buzzsaw",
        "company": "Netflix",
        "genre": "Comedy"
    }
]

}

谢谢

标签： angularhttpclientngx-datatable

angular - 在 Angular 中使用 ngx-datatable 时出现 Httpclient 错误

问题描述

解决方案

推荐阅读