以角度使用 ngx-datatable 时出现 Httpclient 错误

问题描述

我正在尝试在我的 angular 项目中使用 ngx-datable，但我在我的 angular 项目中看到以下错误。我不确定错误的确切含义。但是，我不确定如何解决它。我附上了我在下面更改的所有文件。您可以通过使用 ng new randomName 创建新的 angular 项目并运行 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 { }

app.component: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",{
            "name": "Glass","company": "Universal Pictures","genre": "Superhero"
        },{
            "name": "Close","company": "Netflix","genre": "Action"
        },{
            "name": "The Final Wish","company": "BondIt Capital",{
            "name": "Serenity","company": "Aviron Pictures","genre": "Drama"
    },{
        "name": "Miss Bala","genre": "Thriller"
    },{
        "name": "Velvet Buzzsaw","genre": "Comedy"
    }
]

}

谢谢

解决方法

您需要从 app.module.ts 中的提供程序中删除 HttpClientModule。

在这里你可以看到如何在angular中配置http

Angular Link

我认为这对你有帮助