极客教程Angular PrimeNG DataView组件
Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用dataView组件。我们还将学习属性、事件和造型，以及代码中使用的语法。
dataView组件。它用于在网格和列表布局中显示数据，具有分页和排序功能。
属性：
- value : 它是一个要显示的对象的数组。它是数组的数据类型，默认值为空。
- layout :它是项目的布局，有效值是 “列表 “和 “网格”。它是字符串数据类型，默认值是一个列表。
- paginator : 如果指定为true，它显示分页。它是布尔数据类型，默认值是false。
- rows :它表示每页要显示的行数。它是数字数据类型，默认值为空。
- totalRecords : 表示总记录数，未定义时默认为值的长度。它是数字数据类型，默认值为空。
- pageLinks : 它表示在分页器中显示的页面链接的数量。它是数字数据类型，默认值是5。
- rowsPerPageOptions :它表示一个整数/对象值的数组，用于显示在分页器的每页行数下拉菜单中。它是数组数据类型，默认值为空。
- paginatorPosition : 它是分页器的位置，选项是 “顶部”、”底部 “或 “两者”。它是字符串数据类型。它是字符串数据类型，默认值是底部。
- alwaysShowPaginator : 它指定是否在只有一个页面的情况下显示它。它是布尔数据类型，默认值为真。
- showFirstLastIcon : 它指定在分页器上显示第一页和最后一页的图标。它是布尔数据类型，默认值为true。
- paginatorDropdownAppendTo : 它是连接分页器下拉覆盖的目标元素。它接受任何数据类型，默认值为空。
- paginatorDropdownScrollHeight : 它是视口的分页器下拉高度，单位是像素。它是字符串数据类型，默认值是200px。
- showCurrentPageReport : 它指定是否显示当前页面的报告。它是布尔数据类型，默认值是false。
- showJumpToPageDropdown : 它指定是否显示一个下拉菜单以导航到任何页面。它是布尔数据类型，默认值是false。
- showPageLinks : 它指定是否显示页面链接。它是布尔数据类型，默认值为true。
- lazy : 它指定了数据是否以懒惰的方式被加载和交互。它是布尔数据类型，默认值为false。
- emptyMessage : 当没有数据时显示的文本，它是字符串数据类型。
- style : 它是组件的内联风格。它是字符串数据类型，默认值为空。
- styleClass : 它是组件的风格类。它是字符串数据类型，默认值为空。
- trackBy :它是通过委托给ngForTrackBy来优化dom操作的函数，默认算法是检查对象身份。它属于函数数据类型，默认值为null。
- filterBy :它是以逗号分隔的对象图中的字段列表，用于搜索。它是字符串数据类型，默认值为空。
- filterLocale : 它是在过滤中使用的语言环境。它是字符串数据类型，默认值为未定义。
- loading : 它是一个加载器的显示，表示数据加载正在进行中。它是布尔数据类型，默认值是false。
- loadingIcon : 它是在显示数据加载过程中的图标。它是字符串数据类型，默认值是pi pi-spinner。
- first : 它是要显示的第一行的索引，它是数字数据类型，默认值是0。
Events:
- onLazyLoad : 这是一个回调，当分页、排序或过滤在懒惰模式下发生时，它被触发。
- onPage : 它是一个回调，当分页发生时被触发。
- onSort : 它是一个回调，当排序发生时被触发。
- onChangeLayout :它是一个回调，在改变布局时被触发。
Styling:
- p-dataview。它是一个风格化的容器元素。
- p-dataview-list。它是列表布局中的一个风格化的容器元素。
- p-dataview-grid。它是网格布局中的一个风格化的容器元素。
- p-dataview-header。它是一个风格化的标题部分。
- p-dataview-footer。它是一个风格化的页脚部分。
- p-dataview-content。它是一个项目的风格化容器。
- p-dataview-emptymessage。它是一个风格化的空信息元素。
创建Angular应用程序和模块安装。
第1步 。使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步 。在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
例子1：这是一个基本的例子，展示了如何使用dataView组件。
<div class="card">
<p-dataView
#dv
[value]="productNames"
[paginator]="true"
[rows]="3"
filterBy="name"
layout="grid">
<ng-template let-product pTemplate="gridItem">
<div class="p-col-12 p-md-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">
<h1>GeeksforGeeks</h1>
</div>
<div class="product-grid-item-content">
DataView Component Item
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
import { Component } from "@angular/core";
import { ProductService } from "./productservice";
import { Product } from "./product";
import { SelectItem } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
productNames: string[] = [
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
"GeeksforGeeks",
];
ngOnInit() {}
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DataViewModule } from "primeng/dataview";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DataViewModule,
HttpClientModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将在dataView组件中使用搜索选项，并使用不同的dataView布局。
<div class="card">
<p-dataView
#dv
[value]="productNames"
[paginator]="true"
[rows]="9"
filterBy="name"
[sortField]="sortField"
[sortOrder]="sortOrder"
layout="grid">
<ng-template pTemplate="header">
<div>
<span class="p-input-icon-left p-mb-2 p-mb-md-0">
<i class="pi pi-search"></i>
<input
type="search"
pInputText
placeholder="Search"
(input)="dv.filter($event.target.value)"/>
</span>
<p-dataViewLayoutOptions>
Options
</p-dataViewLayoutOptions>
</div>
</ng-template>
<ng-template let-product pTemplate="gridItem">
<div class="p-col-12 p-md-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">
<h1>{{product}}</h1>
</div>
<div class="product-grid-item-content">
Text Here
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
import { Component } from "@angular/core";
import { ProductService } from "./productservice";
import { Product } from "./product";
import { SelectItem } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
productNames: string[] = [
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
"Heading",
];
ngOnInit() {}
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DataViewModule } from "primeng/dataview";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DataViewModule,
HttpClientModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
