Primeng数据列切换器

Question

我正在尝试将primeNg数据表实现到我的Angular 4项目中。 当我尝试进行分页和多选时，角度投掷错误如下所示。

core.es5.js（抛出错误的部分）

   _DuplicateMap.prototype.remove = function (record) {
    var /** @type {?} */ key = record.trackById;
    var /** @type {?} */ recordList = ((this.map.get(key)));
    // Remove the list of duplicates when it gets empty
    if (recordList.remove(record)) {
        this.map.delete(key);
    }
    return record;
};

我的数据表包含25行列表，每页显示10个 如果，我选择/多选它然后我尝试更改分页页面。 它显示未定义的列表错误，如下所示。

当我尝试从peimeNg colToggler中选择/取消选择要在表格中显示的列时，会发生同样的错误。 （同样的错误也可以在他们的网站上找到。）

链接https://www.primefaces.org/primeng/#/datatable/coltoggler

的package.json

"dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@types/underscore": "^1.8.5",
    "angular-4-data-table": "^0.2.3",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "primeng": "^4.2.4",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.1.0",
    "systemjs": "0.19.27",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.4.0",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }

数据table.demo-html的

  <form>
        <div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
            <div class="form-group row">
                <label for="example-text-input" class="col-2 col-form-label">Search Here</label>
                <div class="col-6">
                    <input #gb class="form-control" type="text" [(ngModel)]="searchText" name="searchText" id="example-text-input">
                </div>
            </div>
            <p-dataTable [value]="dataList" [(selection)]="selectedContracts" (onPage)="onPageEvent($event)" [globalFilter]="gb" [rows]="10"
                [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
                <p-header>
                    <div style="text-align:left">
                        <p-multiSelect [options]="columnOptions" name="
                                cols" [(ngModel)]="cols"></p-multiSelect>
                    </div>
                </p-header> 
                <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
                <p-column *ngFor="let col of cols" [sortable]="true" [field]="col.field" [header]="col.header"></p-column>

                <p-column [sortable]="false" header="Action" styleClass="align-center">
                        <ng-template let-car="rowData" pTemplate="body">
                        <a href="">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                        </a>
                        <a href="">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </a>
                        <a href="">
                            <i class="fa fa-eye" aria-hidden="true"></i>
                        </a>
                    </ng-template>
                </p-column>
            </p-dataTable>
        </div>
    </form>

数据table.demo-.TS

 import { Component } from '@angular/core';
import { DataTableResource } from 'angular-4-data-table';
import persons from './data-table-demo1-data';
import * as _ from 'underscore';
import { SelectItem } from 'primeng/primeng';

import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { FormGroup, FormControl, FormArray, NgForm } from '@angular/forms';


@Component({
    selector: 'data-table-demo-1',
    providers: [],
    templateUrl: './prime-ng.html',
    styleUrls: ['./data-table-demo1.css']
})
export class DataTableDemo1 implements OnInit {
    private myForm: FormGroup;

    itemResource = new DataTableResource(persons);
    dataList = persons;
    selectedContracts: any;

    items = [];
    cols: any[];
    columnOptions: SelectItem[];
    itemCount = 0;

    onPageEvent(event) {

        console.log("Evnet", event);
    }
    paginate(event) {

        console.log("Evnet", event);
    }


    ngOnInit() {

        this.cols = [
            { field: 'name', header: 'ContractTitle' },
            { field: 'date', header: 'StartDate' },
            { field: 'expDate', header: 'ExpityDate' },
            { field: 'reminderStatus', header: 'Reminder' }
        ];

        this.columnOptions = [];

        for (let i = 0; i < this.cols.length; i++) {
            this.columnOptions.push({ label: this.cols[i].header, value: this.cols[i] });
        }
    }

    constructor() {
        this.itemResource.count().then(count => this.itemCount = count);
    }

    getNumber(num) {
        return new Array(3);
    }

    reloadItems(params) {
        this.itemResource.query(params).then(items => this.items = items);
    }

    // special properties:

    rowClick(rowEvent) {
        console.log('Clicked: ' + rowEvent.row.item.name);
    }

    rowDoubleClick(rowEvent) {
        alert('Double clicked: ' + rowEvent.row.item.name);
    }

    rowTooltip(item) { return item.jobTitle; }}