Angular PrimeNG表的某些行和列的样式

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。本文将向我们展示如何在Angular PrimeNG中使用Style Certain Rows and Columns。

表组件以表格的形式向用户显示一些数据。表的某些行和列可以根据一些条件检查，通过对它们应用CSS类来实现不同的风格。

语法:

<p-table [value]="games" responsiveLayout="scroll">
    <ng-template pTemplate="header">
         <tr>
              <th>Game</th>
              <th>Publisher</th>
              ...
         </tr>
    </ng-template>
    <ng-template pTemplate="body" let-game>
        <tr [ngClass]="{ **Condition-Check-Here** }">
            <td>{{game.name}}</td>
            <td>{{game.publisher}}</td>
            ...
        </tr>
    </ng-template>
</p-table>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，项目结构将如下所示。

Angular PrimeNG表的某些行和列的样式

Project Structure

例子1：这个例子展示了如何根据一些条件来设计所选行的样式。在这里，如果评分大于4.0，我们将该行的背景色设置为绿色，否则其背景色将为红色。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Styling Certain Rows and Columns</h4>
  
    <p-table [value]="games" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Game</th>
                <th>Developer</th>
                <th>Release Year</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-game>
            <tr 
                [ngClass]="{
                    'low-rated' : game.rating < 4.0, 
                    'high-rated': game.rating >= 4.0}">
                <td>{{game.name}}</td>
                <td>{{game.developer}}</td>
                <td>{{game.year}}</td>
                <td>{{game.rating}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Game {
    name: String,
    developer: String,
    rating: Number,
    year: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `tr.low-rated{
            background-color: red;
            color: white;
        }
        tr.high-rated{
            background-color: green;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    games: Game[] = [];
  
    ngOnInit() {
        this.games = [
            {
                name: "Minecraft",
                developer: "Mojang Studios",
                year: 2011,
                rating: 4.9
            },
            {
                name: "GTA 5",
                developer: "RockStar Games",
                year: 2013,
                rating: 4.5
            },
            {
                name: "Roblox",
                developer: "Roblox Corporation",
                year: 2011,
                rating: 3.8
            },
            {
                name: "Genshin Impact",
                developer: "miHoYo",
                year: 206,
                rating: 3.9
            },
            {
                name: "Candy Crush Saga",
                developer: "King",
                year: 2014,
                rating: 4.1
            },
            {
                name: "God of War",
                developer: "Jetpack Interactive",
                year: 2018,
                rating: 3.5
            },
            {
                name: "Fortnite",
                developer: "Epic Games",
                year: 2017,
                rating: 3.9
            },
            {
                name: "Fishdom",
                developer: "Playrix",
                year: 2008,
                rating: 4.2
            },
            {
                name: "Asphalt 9: Legends",
                developer: "Gameloft",
                year: 2018,
                rating: 4.4
            },
            {
                name: "Homescapes",
                developer: "Playrix",
                year: 2017,
                rating: 3.2
            },
  
        ];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

运行应用程序：

从你的项目根部执行下面的命令来运行angular应用程序。

ng serve --open

输出:

Angular PrimeNG表的某些行和列的样式

例子2：在这个例子中，我们将交替列的背景颜色设置为红色和绿色。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>
        Angular PrimeNG Table Styling Certain Rows and Columns
    </h4>
  
    <p-table [value]="games" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Game</th>
                <th>Developer</th>
                <th>Release Year</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-game>
            <tr>
                <td 
                    [ngClass]="{'odd-column' : true}">
                    {{game.name}}
                </td>
                <td 
                    [ngClass]="{'even-column' : true}">
                    {{game.developer}}
                </td>
                <td 
                    [ngClass]="{'odd-column' : true}">
                    {{game.year}}
                </td>
                <td 
                    [ngClass]="{'even-column' : true}">
                    {{game.rating}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Game {
    name: String,
    developer: String,
    rating: Number,
    year: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `td.even-column{
            background-color: red;
            color: white;
        }
        td.odd-column{
            background-color: green;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    games: Game[] = [];
  
    ngOnInit() {
        this.games = [
            {
                name: "Minecraft",
                developer: "Mojang Studios",
                year: 2011,
                rating: 4.9
            },
            {
                name: "GTA 5",
                developer: "RockStar Games",
                year: 2013,
                rating: 4.5
            },
            {
                name: "Roblox",
                developer: "Roblox Corporation",
                year: 2011,
                rating: 3.8
            },
            {
                name: "Genshin Impact",
                developer: "miHoYo",
                year: 206,
                rating: 3.9
            },
            {
                name: "Candy Crush Saga",
                developer: "King",
                year: 2014,
                rating: 4.1
            },
            {
                name: "God of War",
                developer: "Jetpack Interactive",
                year: 2018,
                rating: 3.5
            },
            {
                name: "Fortnite",
                developer: "Epic Games",
                year: 2017,
                rating: 3.9
            },
            {
                name: "Fishdom",
                developer: "Playrix",
                year: 2008,
                rating: 4.2
            },
            {
                name: "Asphalt 9: Legends",
                developer: "Gameloft",
                year: 2018,
                rating: 4.4
            },
            {
                name: "Homescapes",
                developer: "Playrix",
                year: 2017,
                rating: 3.2
            },
  
        ];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }