模板语法
服务端渲染
API / @angular/common

NgPlural

Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.

@Directive({ selector: '[ngPlural]' }) class NgPlural { set ngPlural: number addCase(value: string, switchView: SwitchView): void }

选择器

[ngPlural]

输入参数

ngPlural 绑定到 NgPlural.ngPlural

说明

Displays DOM sub-trees that match the switch expression value, or failing that, DOM sub-trees that match the switch expression's pluralization category.

To use this directive you must provide a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] will display based on their expression:

  • if [ngPluralCase] is set to a value starting with =, it will only display if the value matches the switch expression exactly,
  • otherwise, the view will be treated as a "category match", and will only display if exact value matches aren't found and the value maps to its category for the defined locale.

See http://cldr.unicode.org/index/cldr-spec/plural-rules

属性

属性名类型说明
ngPlural

方法

addCase()

addCase(value: string, switchView: SwitchView): void

参数

value

Type: string.

switchView

Type: SwitchView.

返回值

void

使用说明

<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>