Question

我开始使用ASP.NET Core和Angular 4进行冒险。我在VisualStudio中启动了Angular模板项目。

我创建了一些基本页面并尝试使用npm安装ngx-datatable模块。我从演示中完成了所有工作 ngx-databtable Documentation

我的package.json：

"dependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "^4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@swimlane/ngx-datatable": "^10.2.3",
    "@types/ui-grid": "0.0.38",
    "@types/webpack-env": "1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "gulp": "^3.9.1",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "^2.3.4",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
},
"devDependencies": {
    "@angular/cli": "^1.4.6",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
}

运行Debug后 - ＆gt;无需调试即可运行我收到了这样的错误：

NodeInvocationException: Template parse errors:
Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.
1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div class="col-md-12 tab">
<div>
<ngx-datatable [ERROR ->][rows]="rows"
[columns]="columns">
</ngx-datatable>
"): ng:///AppModuleShared/WorkersComponent.html@11:23
Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'.
1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module.
2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div>
<ngx-datatable [rows]="rows"
[ERROR ->][columns]="columns">
</ngx-datatable>
</div>
"): ng:///AppModuleShared/WorkersComponent.html@12:23
'ngx-datatable' is not a known element:

有人能说出可能是什么原因以及最常见的错误是什么，这会导致这样的错误？

提前致谢！

==============编辑======================== < / p>

我已经在Demo中导入了NgxDatatableModule，尽管发生了错误。

我的AppModule文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule,
        AppModuleShared,
        NgxDatatableModule
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

我尝试使用此表的视图：

<div>
    <ngx-datatable [rows]="rows"
                   [columns]="columns">
    </ngx-datatable>
</div>

和控制器

import { Component } from '@angular/core';

@Component({
    selector: 'workers',
    templateUrl: './workers.component.html',
    styleUrls: ['./workers.component.css', '../app.module.css']
})
export class WorkersComponent { 
    rows = [
        { name: 'Austin', gender: 'Male', company: 'Swimlane' },
        { name: 'Dany', gender: 'Male', company: 'KFC' },
        { name: 'Molly', gender: 'Female', company: 'Burger King' },
    ];
    columns = [
        { prop: 'name' },
        { name: 'Gender' },
        { name: 'Company' }
    ];
}

我应该更改默认配置中的任何内容，以便将文件从导入的ngxDataTable移动到wwwroot吗？

Answer 1

使用ngx-datatable安装npm install后，您必须将其添加到您的应用模块以使用其组件

正如错误消息所示，它无法将行和已知属性绑定到ngx-datatable

Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.

这意味着它无法找到ngx-datatable指令。

因此，在您的应用模块中导入NgxDatatableModule，它将在您的应用中提供所有组件和指令。

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

Angular 4没有看到使用npm安装的软件包

1 个答案: