问题描述:

First, this question is not a duplicate, most answers to questions like "Cannot bind to 'x'..." are about unimported modules, I've already imported the right one(s).

I'm following angular.io's doc about ngPlural and ngPluralCase directives:

<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

When I try to run this code I get an error (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);

I imported BrowserModule (which exports CommonModule, but I also tried importing CommonModule directly) in my AppModule, and as you can see, the error is about ngPluralCase and not ngPlural which is in the same module and used without problem...

So my question is :

Does anyone knows what is happening here ? Is it a bug related to the "experimental" state of these directives or am I missing something ?

PS: I'm using angular v2.1.0

网友答案:

For the moment I Opened an issue on the Github repo, because it really seems broken....

Edit This is the answer that I got from my Github issue:

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 is angular.io right now is outdated, at least example of NgPlural.
Example below works with 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>
相关阅读:
Top