Angular10 NgPluralCase 指令

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

Angular10中的NgPluralCase 用于创建一个视图，当给定表达式匹配复数表达式时，该视图将从父 NgPlural 中添加或删除。我们可以根据条件使用这些值使输出复数或单数。

句法：

NgModule：NgPluralCase使用的模块是：

• 通用模块

选择器：

• [NgPluralCase]

方法：

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

示例 1：

app.component.ts

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

app.component.html

    Geek
    Geeks

输出：

Geek

示例 2：

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    valcar = 5;
}

app.component.html

    {{valcar}} Car
    {{valcar}} Cars

输出：

5 Cars

参考： https://angular.io/api/common/NgPluralCase