Angular2:无法绑定到 'ngPluralCase',因为它不是 'x' 的已知 属性
Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'
首先,这个问题不是重复的问题,像"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
目前我打开了一个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.
答案是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>
首先,这个问题不是重复的问题,像"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
目前我打开了一个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.
答案是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>