Question

我安装了ng2-bootstrap作为分页组件。我找到了（https://valor-software.com/ng2-bootstrap/#/pagination#pager-component）的帮助，可以轻松设置组件。

分页也按预期正常工作。

但我遇到运行现有测试用例的问题。当我尝试运行较旧的测试用例时，由于** component.html中新添加的分页代码，我得到了很多测试用例。

<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>

这些是我在尝试运行测试用例时遇到的一些错误。

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            <pagination [ERROR ->][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton">
            <pagination [totalItems]="totalNumberOfRecords" [ERROR ->][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
            "): SearchResultComponent@84:60
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton">
            <pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR ->][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" ["): SearchResultComponent@84:92
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [ERROR ->][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" [ERROR ->][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR ->][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>
       "): SearchResultComponent@85:96
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
No provider for NgControl ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
Error: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            <pagination [ERROR ->][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton">
            <pagination [totalItems]="totalNumberOfRecords" [ERROR ->][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
            "): SearchResultComponent@84:60
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton">
            <pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR ->][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" ["): SearchResultComponent@84:92
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [ERROR ->][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" [ERROR ->][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR ->][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>
       "): SearchResultComponent@85:96
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
No provider for NgControl ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
    at SyntaxError.ZoneAwareError (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2043:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:64958:16)
    at new SyntaxError (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:5443:16)
    at TemplateParser.parse (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:17883:19)
    at JitCompiler._compileTemplate (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48480:68)
    at http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:19)
    at createResult (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48265:19)
    at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1415:26)
    at AsyncTestZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79182:39)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79874:39)
    at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1414:32)
    at Zone.470.Zone.run (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1211:43)
    at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:57
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1728:31) [ProxyZone]
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1704:17) [ProxyZone]
    at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:17 [ProxyZone]
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79901:39) [ProxyZone]
    at ZoneDelegate.470.ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1447:36) [ProxyZone]
    at Zone.470.Zone.runTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1251:47) [<root> => ProxyZone]
    at drainMicroTaskQueue (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1614:35) [<root>]
    at ZoneTask.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1505:25) [<root>]
    at data.args.(anonymous function) (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2612:25) [<root>]

为简单起见，我没有包含来自分页 html标记的其他错误。它会导致分页标记内的所有属性出错。

请帮我解决这个问题。

Answer 1

不要忘记将分页模块导入到您的测试台配置中，它会解决一个问题

Answer 2

如果您已将分页模块添加到测试台和NgModule中，只需检查该组件是否与同一个NgModule一样，因为它看起来像是一个不同的组件请与应用树结构共享您的NgModule

请检查您的systemjs，您可能错过了提及ng2-bootstrap的文件

Angular2 - 分页错误

2 个答案: