我得到的错误

Question

我克隆了mgechev's angular-seed project，现在我要添加ng2-table。

我得到的错误

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("
<pagination *ngIf="config.paging"
            class="pagination-sm"
            [ERROR ->][(ngModel)]="page"
            [totalItems]="length"
            [itemsPerPage]="itemsPerPage"
"): TableComponent@17:12
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("
            class="pagination-sm"
            [(ngModel)]="page"
            [ERROR ->][totalItems]="length"
            [itemsPerPage]="itemsPerPage"
            [maxSize]="maxSize"
"): TableComponent@18:12

// And continues...

但是，我认为该库已正确导入，至少它显示为该网站的来源：

我做了什么来导入库

1.创建html模板（table.component.html）

我刚刚复制了示例代码：

<div class="row">
  <div class="col-md-4">
    <input *ngIf="config.filtering" placeholder="Filter all columns"
           [ngTableFiltering]="config.filtering"
           class="form-control"
           (tableChanged)="onChangeTable(config)"/>
  </div>
</div>
<br>
<ng-table [config]="config"
          (tableChanged)="onChangeTable(config)"
          (cellClicked)="onCellClick($event)"
          [rows]="rows" [columns]="columns">
</ng-table>
<pagination *ngIf="config.paging"
            class="pagination-sm"
            [(ngModel)]="page"
            [totalItems]="length"
            [itemsPerPage]="itemsPerPage"
            [maxSize]="maxSize"
            [boundaryLinks]="true"
            [rotate]="false"
            (pageChanged)="onChangeTable(config, $event)"
            (numPages)="numPages = $event">
</pagination>
<pre *ngIf="config.paging" class="card card-block card-header">
  Page: {{page}} / {{numPages}}
</pre>

2.创建table.component.ts

同样，我复制了示例代码：

import { Component, OnInit } from '@angular/core';
import { TableData } from './table.data';

@Component({
  moduleId: module.id,
  selector: 'table-demo',
  templateUrl: 'table.component.html'
})
export class TableComponent implements OnInit {
  // Just a copy and paste from the example
}

3.创建包含表格数据的table.data.ts文件

刚复制。

4.创建table.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TableComponent } from './table.component';

import { Ng2TableModule } from 'ng2-table/ng2-table';

console.log(Ng2TableModule); // prints empty function: 'function Ng2TableModule() {}'

@NgModule({
    imports: [CommonModule, Ng2TableModule],
    declarations: [TableComponent],
    exports: [TableComponent]
})

export class TableModule { }

5.将TableModule添加到app.module.ts

// ..
import { TableModule } from './table/table.module';

@NgModule({
  imports: [
    // ...
    TableModule],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})

export class AppModule { }

6.将依赖项添加到SystemJS

我按照wiki中的建议在project.config.ts文件中添加了以下几行：

// ...

export class ProjectConfig extends SeedConfig {

  // ...

  constructor() {

    // ...

    this.SYSTEM_CONFIG_DEV.paths['ng2-table'] =
    `${this.APP_BASE}node_modules/ng2-table/ng2-table`;

    this.SYSTEM_BUILDER_CONFIG.packages['ng2-table'] = {
      main: 'ng2-table.js',
      defaultExtension : 'js'
    }
  }
}

知道我缺少什么吗？

谢谢！

Answer 1

我意识到这是一个老问题，但我认为除了ng2-table之外你还需要ng2-bootstrap。 ng2-bootstrap具有您在上面的代码中引用的分页组件。

如何将ng2表库添加到Angular种子？

我得到的错误

我做了什么来导入库

1 个答案: