📜  Angular 10 NgPlural 指令

📅  最后修改于: 2022-05-13 01:56:23.845000             🧑  作者: Mango

Angular 10 NgPlural 指令

在本文中,我们将了解 Angular 10 中的 NgPlural 是什么以及如何使用它。

Angular10NgPlural 用于根据数值添加或删除 DOM 子树。

句法:

  • NgModule:NgPlural使用的模块是:

    • 通用模块

    选择器:

    • [Ng复数]

    方法:

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

    例子:

    app.component.ts
    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;
    }


    app.component.html
    
        Geek
        Geeks
      


    app.component.html

    
        Geek
        Geeks
      
    

    输出:

    Geek

    参考: https://angular.io/api/common/NgPlural