Angular PrimeNG表pFrozenColumn属性

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的风格设计，这个框架可用于制作响应式网站，非常方便。这篇文章将告诉我们如何在Angular PrimeNG中使用pFrozenColumn属性。

表组件以表格形式向用户显示一些数据。pFrozenColumn属性被用来冻结一列。pFrozenColumn指令有两个属性，下面列出。

frozen:这是一个布尔属性，用于说明该列是否被冻结。
alignFrozen:这个属性定义了冻结列的对齐方式。它定义了冻结的列是应该坚持在表格的左边还是右边。默认值是左边。

语法:

<p-table [value]="cars" [scrollable]="true" scrollDirection="horizontal">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 300px" **pFrozenColumn** >
                Car
            </th>
            <th style="width: 300px">Company</th>
                ...
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td style="width: 300px" **pFrozenColumn** >
               {{car.name}}
            </td>
            <td style="width: 300px">{{car.company}}</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表pFrozenColumn属性

Project Structure

例子1：在这个例子中，我们使用pFrozenColumn指令来冻结表格的第一列。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table pFrozenColumn Properties</h4>
  
    <p-table 
        [value]="cars" 
        [scrollable]="true" 
        scrollDirection="horizontal">
        <ng-template pTemplate="header">
            <tr>
                <th 
                    style="width: 300px" 
                    pFrozenColumn 
                    class="frozen-col">
                    Car
                </th>
                <th style="width: 300px">Company</th>
                <th style="width: 300px">Vehicle Number</th>
                <th style="width: 300px">Manufactured year</th>
                <th style="width: 300px">KM Driven</th>
                <th style="width: 300px">Price</th>
                <th style="width: 300px">Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td 
                    style="width: 300px" 
                    pFrozenColumn 
                    class="frozen-col">
                    {{car.name}}
                </td>
                <td style="width: 300px">{{car.company}}</td>
                <td style="width: 300px">{{car.number}}</td>
                <td style="width: 300px">{{car.manufacturedYear}}</td>
                <td style="width: 300px">{{car.kmDriven}}</td>
                <td style="width: 300px">{{car.price}}</td>
                <td style="width: 300px">{{car.rating}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Car {
    name: String,
    company: String,
    number: String,
    manufacturedYear: Number,
    kmDriven: Number,
    price: String,
    rating: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `.frozen-col{
            font-weight: bold;
        }`
    ]
})
  
export class AppComponent {
    cars: Car[] = [];
  
    ngOnInit() {
        this.cars = [
            {
                name: "Creta",
                company: "Hyundai",
                number: "MH01BHXX01",
                manufacturedYear: 2016,
                kmDriven: 23456,
                price: "11 Lakhs",
                rating: 4.0
            },
            {
                name: "Audi Q7",
                company: "Audi",
                number: "UP76APXXX2",
                manufacturedYear: 2006,
                kmDriven: 11342,
                price: "90.2 Lakhs",
                rating: 4.7
            },
            {
                name: "Venue",
                company: "Hyundai",
                number: "MH11AHXX01",
                manufacturedYear: 2019,
                kmDriven: 45456,
                price: "7.8 Lakhs",
                rating: 3.5
            },
            {
                name: "Audi A4",
                company: "Hyundai",
                number: "BR01SD1XX0",
                manufacturedYear: 1997,
                kmDriven: 18446,
                price: "49.4 Lakhs",
                rating: 4.5
            },
            {
                name: "Audi e-tron",
                company: "Audi",
                number: "MP11BPXX00",
                manufacturedYear: 2020,
                kmDriven: 9901,
                price: "1.2 Crore",
                rating: 4.9
            },
        ];
    }
}

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 PrimeNG表pFrozenColumn属性

例子2：在这个例子中，我们使用切换按钮来动态地释放和解冻列。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table pFrozenColumn Properties</h4>
  
    <p-toggleButton 
        class="mr-3"
        [(ngModel)]="isNameFreeze" 
        [onLabel]="'Unfreeze Name'" 
        offLabel="Freeze Name" 
        [onIcon]="'pi pi-lock'" 
        [offIcon]="'pi pi-lock-open'" >
    </p-toggleButton>
    <p-toggleButton 
        class="ml-3" 
        [(ngModel)]="isPriceFreeze" 
        [onLabel]="'Unfreeze Price'" 
        offLabel="Freeze Price" 
        [onIcon]="'pi pi-lock'" 
        [offIcon]="'pi pi-lock-open'">
    </p-toggleButton>
  
    <p-table 
        [value]="cars" 
        [scrollable]="true" 
        scrollDirection="horizontal">
        <ng-template pTemplate="header">
            <tr>
                <th 
                    style="width: 300px" 
                    pFrozenColumn 
                    [frozen]="isNameFreeze" 
                    [ngClass]="{'frozen' : isNameFreeze}">
                    Car
                </th>
                <th style="width: 300px">Company</th>
                <th style="width: 300px">Vehicle Number</th>
                <th style="width: 300px">Manufactured year</th>
                <th style="width: 300px">KM Driven</th>
                <th style="width: 300px">Rating</th>
                <th 
                    style="width: 300px" 
                    pFrozenColumn 
                    [frozen]="isPriceFreeze" 
                    alignFrozen="right" 
                    [ngClass]="{'frozen' : isPriceFreeze}">
                    Price
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td 
                    style="width: 300px" 
                    pFrozenColumn 
                    [frozen]="isNameFreeze" 
                    [ngClass]="{'frozen' : isNameFreeze}">
                    {{car.name}}
                </td>
                <td style="width: 300px">{{car.company}}</td>
                <td style="width: 300px">{{car.number}}</td>
                <td style="width: 300px">{{car.manufacturedYear}}</td>
                <td style="width: 300px">{{car.kmDriven}}</td>
                <td style="width: 300px">{{car.rating}}</td>
                <td 
                    style="width: 300px" 
                    pFrozenColumn 
                    [frozen]="isPriceFreeze" 
                    alignFrozen="right" 
                    [ngClass]="{'frozen' : isPriceFreeze}">
                    {{car.price}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Car {
    name: String,
    company: String,
    number: String,
    manufacturedYear: Number,
    kmDriven: Number,
    price: String,
    rating: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `.frozen{
            font-weight: bold;
        }`
    ]
})
  
export class AppComponent {
  
    isNameFreeze: boolean = false;
    isPriceFreeze: boolean = false;
    cars: Car[] = [];
  
    ngOnInit() {
        this.cars = [
            {
                name: "Creta",
                company: "Hyundai",
                number: "MH01BHXX01",
                manufacturedYear: 2016,
                kmDriven: 23456,
                price: "11 Lakhs",
                rating: 4.0
            },
            {
                name: "Audi Q7",
                company: "Audi",
                number: "UP76APXXX2",
                manufacturedYear: 2006,
                kmDriven: 11342,
                price: "90.2 Lakhs",
                rating: 4.7
            },
            {
                name: "Venue",
                company: "Hyundai",
                number: "MH11AHXX01",
                manufacturedYear: 2019,
                kmDriven: 45456,
                price: "7.8 Lakhs",
                rating: 3.5
            },
            {
                name: "Audi A4",
                company: "Hyundai",
                number: "BR01SD1XX0",
                manufacturedYear: 1997,
                kmDriven: 18446,
                price: "49.4 Lakhs",
                rating: 4.5
            },
            {
                name: "Audi e-tron",
                company: "Audi",
                number: "MP11BPXX00",
                manufacturedYear: 2020,
                kmDriven: 9901,
                price: "1.2 Crore",
                rating: 4.9
            },
        ];
    }
  
}

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';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { FormsModule } from '@angular/forms';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ToggleButtonModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }