Angular2：无法绑定到 'ngPluralCase'，因为它不是 'x' 的已知属性

Question

首先，这个问题不是重复的问题，像"Cannot bind to 'x'..."这样的问题的大多数答案都是关于未导入的模块，我已经已经导入了正确的.

我正在关注 angular.io 关于 ngPlural and ngPluralCase 指令的文档：

<some-element [ngPlural]="value">
  <ng-container *ngPluralCase="'=0'">...</ng-container>
  <ng-container *ngPluralCase="'other'">...</ng-container>
</some-element>
(...)

exported from @angular/common/index, defined in @angular/common/src/directives/ng_plural.ts

当我尝试运行此代码时出现错误 (see it in plnkr):

Can't bind to 'ngPluralCase' since it isn't a known property of 'ng-container'.

main.ts :

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  template:`
  <div [ngPlural]="1">
      <ng-container *ngPluralCase="'=0'">...</ng-container>
      <ng-container *ngPluralCase="'other'">...</ng-container>
  </div>
  `,
  styles: []
})
class AppComponent {

}

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [AppComponent],
  exports: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

我在 AppModule 中导入了 BrowserModule（导出 CommonModule，但我也尝试直接导入 CommonModule），如您所见，错误是关于 ngPluralCase 而不是 ngPlural，它在同一个模块中并且使用没有问题...

所以我的问题是：

有谁知道这里发生了什么？这是与这些指令的 "experimental" 状态相关的错误还是我遗漏了什么？

PS: 我正在使用 angular v2.1.0

Answer 1

目前我打开了一个issue on the Github repo，因为它看起来真的坏了....

编辑这是我的 Github 问题中的 answer that I got：

The problem here is actually that the NgPluralCase directive uses an @Attribute injection and because ng-container are virtual nodes, attributes can not be retrieved on them.

You have to use a <template> tag in this case, the docs will be fixed as part of a pending PR.

Answer 2

答案是angular.io right now is outdated, at least example of NgPlural。
以下示例适用于 v2.4.4：

<some-element [ngPlural]="value">
  <template ngPluralCase="=0">there is nothing</template>
  <template ngPluralCase="=1">there is one</template>
  <template ngPluralCase="few">there are a few</template>
</some-element>

Angular2：无法绑定到 'ngPluralCase'，因为它不是 'x' 的已知属性

Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'

angular

typescript

pluralize

Angular2：无法绑定到 'ngPluralCase'，因为它不是 'x' 的已知 属性

Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'

angular

typescript

pluralize

Angular2：无法绑定到 'ngPluralCase'，因为它不是 'x' 的已知属性