Angular 10 NgPlural指令

在这篇文章中，我们将看到Angular 10中的NgPlural是什么以及如何使用它。

Angular10中的NgPlural是用来根据一个数值来添加或删除DOM子树的。

语法:

<li *NgPlural='condition'></li>

NgModule: NgPlural使用的模块是。

CommonModule

Selectors:

[NgPlural]

步骤:

创建一个将要使用的Angular应用程序。
使用NgPlural不需要任何进口。
在app.component.ts中定义一个变量
在app.component.html中，在有条件检查的元素中使用ngPlural与ngPlural case指令。
使用ng serve为angular应用程序提供服务，以查看输出。

示例:

import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  val = 1;
}

<some-element [ngPlural]="val">
    <ng-template ngPluralCase="=1">Geek</ng-template>
    <ng-template ngPluralCase="=2">Geeks</ng-template>
  </some-element>

输出: