无法让ngPlural工作Angular

时间:2017-08-20 12:22:49

标签: angular angular2-directives

我正在尝试让ngPlural使用Angular版本4.0.3,如api中所述:https://angular.io/api/common/NgPlural

10
1
2
3
4
5
6
7
8
Traceback (most recent call last):
  File "nimetu1.py", line 44, in <module>
    main()
  File "nimetu1.py", line 41, in main
    print1()
  File "nimetu1.py", line 5, in print1
    return print2()
  File "nimetu1.py", line 9, in print2
    return print3()
  File "nimetu1.py", line 13, in print3
    return print4()
  File "nimetu1.py", line 17, in print4
    return print5()
  File "nimetu1.py", line 21, in print5
    return print6()
  File "nimetu1.py", line 25, in print6
    return print7()
  File "nimetu1.py", line 29, in print7
    return print8()
  File "nimetu1.py", line 33, in print8
    return print9()
RuntimeError: maximum recursion depth exceeded

当我使用[ngPlural]时,我收到模板参考的错误<some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element> 。如果我删除它并使用* ngPlural我也会收到错误 No provider TemplateRef!

我认为我不需要将它作为提供者添加,因为它来自Angular Common Library,如* ngIf和* ngFor,它们在连接公共库之后起作用。

文档是否与v4.0.3保持同步?
如何才能在我的模板中使用它?

更新

我添加了一个plunker来展示这个问题:https://plnkr.co/edit/SQwRWjVEJjpQMVkWO1G4?p=preview

2 个答案:

答案 0 :(得分:2)

您可以使用扩展形式,如:

<div [ngPlural]="value" class="testParent">
   <ng-template ngPluralCase="=0">
      <square class="testBox1"></square>
   </ng-template>
   <ng-template ngPluralCase="=1">
     111
   </ng-template>
</div>

<强> Plunker Example

或简短形式:

{ value, plural, =0 {<square class="testBox1"></square>} =1 {111} }

<强> Plunker Example

答案 1 :(得分:1)

你必须使用ngPluralCase =&#34;&#34;使用ng-template。

试试这个:

 <square class="testBox1" [ngPlural]="value">
          <ng-template ngPluralCase="=0">case 0</ng-template>
      </square>