Question

我是角色的新手，我已经构建了一个需要显示可排序表的小应用程序。在开发模式下，Angular-cli开发服务器运行良好（使用ng serve）。

我已尝试使用ng2-table和angular-table库实现该表，因此我怀疑这不是与这些库中的任何一个相关的问题。

但是，当我使用ng build --prod构建应用程序以部署到我的登台服务器上时，当我尝试访问应用程序时，我在浏览器控制台中收到以下错误＆＃34;

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'rowsOnPageSet' since it isn't a known property of 'mfBootstrapPaginator'. ("                     <td colspan="3">
                                        <mfBootstrapPaginator [ERROR ->][rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator>
                                    </td>
     "): a@42:62 ; Zone: <root> ; Task: Promise.then ; Value:

Template parse errors:↵Can't bind to 'rowsOnPageSet' since it isn't a known property of 'mfBootstrapPaginator'. ("                     <td colspan="3">↵                                        <mfBootstrapPaginator [ERROR ->][rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator>↵                                    </td>↵     "): a@42:62"

我已经更新了我的代码，因此它全部使用Angular 2.0.0RC5运行。也就是说，它使用新的@NgModule装饰器。

我们非常感谢您提供的任何帮助或建议。我在这里结束了。

非常感谢

JT

注意： 我尝试暂时将DataTableDirectives指定为组件的@Component装饰器下的指令，但这并没有＆＃39 ; t帮助。

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {DataTableDirectives} from 'angular2-datatable/datatable';
import {AppComponent, APP_ROUTER_PROVIDERS, APP_ROUTES} from './';
import {MapToIterable} from './utils';
import {ServerDataService} from './services';
import {HomeComponent, DecoderStatusComponent, ActivityListComponent, PassingsComponent} from './components';


@NgModule({
    imports: [
        APP_ROUTES,
        BrowserModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        DecoderStatusComponent,
        ActivityListComponent,
        PassingsComponent,
        HomeComponent,
        MapToIterable,
        DataTableDirectives
    ],
    providers: [
        APP_ROUTER_PROVIDERS,
        ServerDataService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

系统config.ts

/*******************************
 * User Configuration.
 *******************************/

/** Map relative paths to URLs. */
const map: any = {
    'lodash':               'vendor/lodash',
    'rxjs':                 'vendor/rxjs',
    'angular2-datatable':   'vendor/angular2-datatable',
    'ng2-bootstrap':        'vendor/ng2-bootstrap',
    'moment':               'vendor/moment'
};

/** User packages configuration. */
const packages: any = {
    'lodash':               { defaultExtension: 'js', main: 'lodash.js' },
    'rxjs':                 { defaultExtension: 'js' },
    'angular2-datatable':   { defaultExtension: 'js' },
    'moment':               { format: 'cjs', defaultExtension: 'js' },
    'ng2-bootstrap':        { format: 'cjs', defaultExtension: 'js' }
};



/*******************************
 * Everything underneath this line is managed by the CLI.
 *******************************/
const barrels: string[] = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/forms',
    '@angular/http',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',

    // Thirdparty barrels.


    // App specific barrels.
    'app',
    'app/shared',
    'app/components',
    'app/model',
    'app/services',
    'app/utils'
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
    map: {
        '@angular': 'vendor/@angular',
        'rxjs': 'vendor/rxjs',
        'main': 'main.js'
    },
    packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

Passings.html

<div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
                                <thead>
                                <tr>
                                    <th>Passing</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let item of mf.data">
                                    <td>{{item[0]}}</td>
                                    <td>{{item[1]}}</td>
                                    <td>{{item[2]}}</td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="3">
                                        <mfBootstrapPaginator [rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

Answer 1

好吧，这似乎是一个已知问题。参见：

https://github.com/angular/angular/issues/10618

通过这个帖子值得一读，因为它几乎解释了整个问题。

目前，请不要丑化您的代码。如果您正在使用angular-cli，则可能需要在下一个版本之前进行开发构建。

ng build --prod导致模板分析错误

1 个答案: