无法让 ngPlural 工作 Angular

Question

我正在尝试使用 Angular 版本 4.0.3 使 ngPlural 工作，如 api 中所述：https://angular.io/api/common/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!。如果我删除它并使用 *ngPlural 我也会得到一个错误 No provider for NgPlural!

我认为我不需要将其添加为提供程序，因为它来自 Angular 公共库，如 *ngIf 和 *ngFor，它们在连接公共库后工作。

文档是最新的 v4.0.3 吗？
我怎样才能让它在我的模板中工作？

更新：

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

Answer 1

您必须将 ngPluralCase="" 与 ng-template 一起使用。

试试这个：

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

Answer 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

无法让 ngPlural 工作 Angular

Can't get ngPlural to work Angular

angular2-directives

angular

更新：