valor-software / ng2-table

Simple table extension with sorting, filtering, paging... for Angular2 apps
http://valor-software.github.io/ng2-table/
MIT License
553 stars 335 forks source link

ng2-table error: Can't bind to ' various items' since it isn't a known property of 'ng-table' #573

Closed stephenad closed 7 years ago

stephenad commented 7 years ago

I am using the valor software ng2-table but when I try and run it I get the following errors in the console but the compiler is happy,

Any recommendations on how I go about resolving these errors, I assume I am missing imports or packages or something but for the life of me cannot work out how to debug this issue.

Errors from console:

`Unhandled Promise rejection: Template parse errors: Can't bind to 'active' since it isn't a known property of 'ng-table'.

  1. If 'ng-table' is an Angular component and it has 'active' input, then verify that it is part of this module.
  2. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("="onNewUserChangeTable(newuserConfig)"(cellClicked)="onCellClick($event)" [ERROR ->][active]="selectedNewUserRow"

                    [rows]="newuserRows" [columns]="newuserColumns"): NEWAdminUserTableComponent@38:60

    Can't bind to 'links' since it isn't a known property of 'ng-table'.

  3. If 'ng-table' is an Angular component and it has 'links' input, then verify that it is part of this module.
  4. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("tive]="selectedNewUserRow" [rows]="newuserRows" [columns]="newuserColumns" [ERROR ->][links]="newuserLinks"

                    (editClicked)="onEditClicked($event)"
    
         "): NEWAdminUserTableComponent@39:72

    Can't bind to 'options' since it isn't a known property of 'ng-select'.

  5. If 'ng-select' is an Angular component and it has 'options' input, then verify that it is part of this module.
  6. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (">

                         <div class="col-sm-8"> 
    
                            <ng-select [ERROR ->][options]="customersToSelect" formControlName="CustomerID" placeholder="Select Customer Name" [disabl"): NEWAdminUserTableComponent@261:43

    Can't bind to 'allowClear' since it isn't a known property of 'ng-select'.

  7. If 'ng-select' is an Angular component and it has 'allowClear' input, then verify that it is part of this module.
  8. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("Select" formControlName="CustomerID" placeholder="Select Customer Name" [disabled]="isReadOnlyForm" [ERROR ->][allowClear]="true"

                                 (deselected)="onCustomerDeselected($event)"): NEWAdminUserTableComponent@261:165

    'ng-select' is not a known element:

  9. If 'ng-select' is an Angular component, then verify that it is part of this module.
  10. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("Name

                         <div class="col-sm-8"> 
    
                            [ERROR ->]<ng-select [options]="customersToSelect" formControlName="CustomerID" placeholder="Select Customer Na"): NEWAdminUserTableComponent@261:32 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:

    Can't bind to 'active' since it isn't a known property of 'ng-table'.

  11. If 'ng-table' is an Angular component and it has 'active' input, then verify that it is part of this module.
  12. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("="onNewUserChangeTable(newuserConfig)"

                    (cellClicked)="onCellClick($event)" [ERROR ->][active]="selectedNewUserRow"
    
                    [rows]="newuserRows" [columns]="newuserColumns"): NEWAdminUserTableComponent@38:60

    Can't bind to 'links' since it isn't a known property of 'ng-table'.

  13. If 'ng-table' is an Angular component and it has 'links' input, then verify that it is part of this module.
  14. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("tive]="selectedNewUserRow"

                    [rows]="newuserRows" [columns]="newuserColumns" [ERROR ->][links]="newuserLinks" 
    
                    (editClicked)="onEditClicked($event)"
    
         "): NEWAdminUserTableComponent@39:72

    Can't bind to 'options' since it isn't a known property of 'ng-select'.

  15. If 'ng-select' is an Angular component and it has 'options' input, then verify that it is part of this module.
  16. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (">

                         <div class="col-sm-8"> 
    
                            <ng-select [ERROR ->][options]="customersToSelect" formControlName="CustomerID" placeholder="Select Customer Name" [disabl"): NEWAdminUserTableComponent@261:43

    Can't bind to 'allowClear' since it isn't a known property of 'ng-select'.

  17. If 'ng-select' is an Angular component and it has 'allowClear' input, then verify that it is part of this module.
  18. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("Select" formControlName="CustomerID" placeholder="Select Customer Name" [disabled]="isReadOnlyForm" [ERROR ->][allowClear]="true"

                                 (deselected)="onCustomerDeselected($event)"): NEWAdminUserTableComponent@261:165

    'ng-select' is not a known element:

  19. If 'ng-select' is an Angular component, then verify that it is part of this module.
  20. If 'ng-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("Name

                         <div class="col-sm-8"> 
    
                            [ERROR ->]<ng-select [options]="customersToSelect" formControlName="CustomerID" placeholder="Select Customer Na"): NEWAdminUserTableComponent@261:32, but from what I can see I have all the correct imports and directives for this to work but evidently something is wrong.

Below is the table code: / !!! System Imports !!! / import { Component, OnInit, ViewChild } from '@angular/core'; import { ToasterService } from 'angular2-toaster'; import { FormsModule } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { ModalDirective } from 'ng2-bootstrap'; import { ChangeDetectorRef } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router';

/* Project Imports / import {NewUserService, EventService, ExportToExcel } from '../services/index'; //AuditLogService import { NewUser, AuditLog} from '../models/index'; import { NewUserGrid } from '../grid/index'; import as FileSaver from 'file-saver';

let json2csv = require('json2csv'); let jsPDF = require('jspdf'); require('jspdf-autotable');

@Component ( { selector: 'app-newadminusertable', templateUrl: './adminusertable.component.html', styleUrls: ['./adminusertable.component.css'] } )

export class NEWAdminUserTableComponent implements OnInit { @ViewChild('userModal') public userModal: ModalDirective; / TO REMOVE IN DUE COURSE/ // @ViewChild('file') file: any; // @ViewChild('img') img: any; / TO REMOVE IN DUE COURSE END/

newusers: NewUser[]; newuser: NewUser; auditLogModel: AuditLog;

oldValue: any; message: string; isEditForm: boolean; rowIndex: number;

loggedUser: any = {};

myForm: FormGroup; isReadOnlyForm: boolean; show: boolean;

//newuser grid code ======================================================================== public newuserRows: Array < any > = []; public newuserColumns: Array < any > = []; public newuserPage: number = 1; public newuserItemsPerPage: number = 10; public newuserMaxSize: number = 5; public newuserNumPages: number = 1; public newuserLength: number = 0;

public newuserLinks: any = { isEdit: false, isDelete: false, isView: false };

public gridData: any = { grid: '', isSuperAdmin: null };

public newuserConfig: any = {}; public newuserRowCount: number; public selectedNewUserRow: number; public newuserOtherColumns : number = 0; public gridFilteredData : any = {}; public textMessage : string = '';

//newuser grid code ========================================================================

public params : any = { }

constructor( private fb: FormBuilder, private newuserService: NewUserService,
private toasterService: ToasterService, private eventService: EventService,

private newuserGrid: NewUserGrid, private loaderService: LoaderService, private ref: ChangeDetectorRef, private route: ActivatedRoute, private router: Router, private exportToExcel: ExportToExcel ) { }

ngOnInit(): void { this.InitializeForm(); this.GetMethods();

}

//form code================================================================================================== private InitializeForm() {`

stephenad commented 7 years ago

I solved my problem, I had in my package.json file I had a dependancy for "ng2-table and because of this it was overwriting my custom ng2-table.

Removing this and updating npm solved these errors