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

【问题标题】：Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'Angular2：无法绑定到“ngPluralCase”，因为它不是“x”的已知属性
【发布时间】：2017-02-27 15:29:03
【问题描述】：

首先，这个问题不是重复的，对于诸如“无法绑定到'x'...”之类的问题的大多数答案都是关于未导入的模块，我已经导入了正确的一个。

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

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

从@angular/common/index 导出，在@angular/common/src/directives/ng_plural.ts 中定义

当我尝试运行此代码时，我收到错误 (see it in plnkr):

无法绑定到“ngPluralCase”，因为它不是“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在同一个模块中，使用没有问题...

所以我的问题是：

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

PS：我使用的是 angular v2.1.0

【问题讨论】：

我看到你打开了一个问题，好电话。出于某种原因，我没有像那样使用它，但像<template ngPluralCase="other"> 一样成功地使用它（也有点短）。一个问题here 仍然没有得到公平的答案。

标签： angular typescript pluralize

【解决方案1】：

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

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

这里的问题实际上是 NgPluralCase 指令使用了@Attribute 注入，因为ng-container 是虚拟节点，所以无法在它们上检索属性。

在这种情况下，您必须使用 <template> 标签，文档将作为待处理 PR 的一部分进行修复。

【讨论】：

【解决方案2】：

答案是angular.io 现在已经过时了，至少是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>

【讨论】：