调用节点模块失败并显示错误：错误：未捕获（在承诺中）：TypeError：无法读取未定义的属性'toLowerCase'

Question

我在VS2017上使用AngularJS和Typesctipt与ASP.Net Core模板。 我在我的一个网页上添加了ng2-table。

我的app.module.shared.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { FiesaGridComponent } from './components/Grid/fiesaGrid.component';

export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        FiesaGridComponent,
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'Fiesa', component: FiesaGridComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        Ng2TableModule,
        Ng2BootstrapModule.forRoot()
    ]
};

网格HTML

<ng-table [config]="config"
      (tableChanged)="onChangeTable(config)"
      (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns">
</ng-table>

我的组件ts文件如下：

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

@Component({
    selector: 'fiesaGrid',
    templateUrl: './fiesaGrid.component.html',
})  

export class FiesaGridComponent
{
    public page: number = 1;
    public itemsPerPage: number = 10;
    public rows: Array<any> = [];
    public columns: Array<any> = [
        { title: 'Name', name: 'name', filtering: { filterString: '', placeholder: 'Filter by name' } },
        {
            title: 'Position',
            name: 'position',
            sort: false,
            filtering: { filterString: '', placeholder: 'Filter by position' }
        },
        { title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc' },
        { title: 'Extn.', name: 'ext', sort: '', filtering: { filterString: '', placeholder: 'Filter by extn.' } },
        { title: 'Start date', className: 'text-warning', name: 'startDate' },
        { title: 'Salary ($)', name: 'salary' }
    ];


    public config: any = {
        paging: true,
        sorting: { columns: this.columns },
        filtering: { filterString: '' },
        className: ['table-striped', 'table-bordered']
    };

    private data: Array<any> = [
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position1', office: 'office1' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position2', office: 'office2' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position3', office: 'office3' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' }
    ];

    public constructor() {
        this.length = this.data.length;
    }

    public ngOnInit(): void {
        this.onChangeTable(this.config);
    }

    public onChangeTable(config: any, page: any = { page: this.page, itemsPerPage: this.itemsPerPage }): any {
        this.rows = this.data;
    }
}

现在我刷新页面的那一刻抛出异常：

Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
        TypeError: Cannot read property 'toLowerCase' of undefined
        at DefaultServerRenderer2.setProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:11685:54)
        at RendererAdapter.module.exports.RendererAdapter.setElementProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21232:23)
        at setProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:7569:14)
        at new NgTableFilteringDirective (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:7581:9)
        at createClass (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21631:26)
        at createDirectiveInstance (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21459:37)
        at createViewNodes (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:22822:49)
        at Object.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:22715:5)
        at TemplateRef_.module.exports.TemplateRef_.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21040:38)
        at ViewContainerRef_.module.exports.ViewContainerRef_.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:20832:52)
        at resolvePromise (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83659:31)
        at resolvePromise (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83630:17)
        at C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83707:17
        at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83316:31)
        at Object.onInvokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:14877:37)
        at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83315:36)
        at Zone.module.exports.Zone.runTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83083:47)
        at drainMicroTaskQueue (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83476:35)
        at ZoneTask.invoke (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83382:25)
        at data.args.(anonymous function) (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:84294:25)
        Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()

发生异常的 main-server.js 部分：

DefaultServerRenderer2.prototype.setProperty = function (el, name, value) {
    checkNoSyntheticProp(name, 'property');
    _angular_platformBrowser.ɵgetDOM().setProperty(el, name, value);
    // Mirror property values for known HTML element properties in the attributes.
    var /** @type {?} */ tagName = ((el.tagName)).toLowerCase(); // Exception occured on this line
    if (value != null && (typeof value === 'number' || typeof value == 'string') &&
        this.schema.hasElement(tagName, EMPTY_ARRAY) &&
        this.schema.hasProperty(tagName, name, EMPTY_ARRAY) &&
        this._isSafeToReflectProperty(tagName, name)) {
        this.setAttribute(el, name, value.toString());
    }
};

我无法得到什么是例外。

请帮忙。

Answer 1

过滤有问题。 打开浏览器的开发工具并重新加载 等一下 按“捕捉异常”按钮。

它有助于捕获异常开始的地方。有时你会看到像你这样的消息，但问题出在另一个地方。

我会把它写成评论，但没有足够的声誉