обзор
В этом руководстве мы будем использовать компонент PrimeNG DataTable. Используется для отображения данных в табличном формате. В следующих уроках мы будем выполнять реализацию редактирования внутри ячейки и строки.
Технологический стек
Мы будем использовать:
- Угловой 8.
- PrimeNG.
Видеоурок
Реализация
Вот окончательная структура файла для нашего проекта:
Разработать угловое приложение
Сначала установите NodeJS. Перейдите на страницу загрузок NodeJS и загрузите установщик. Запустите установщик и установите NodeJS.
Установите Angular CLI, используя следующую команду:
Оболочка
xxxxxxxxxx
1
npm install -g @angular/cli
Затем создайте новый проект Angular с именем «library-data».
Оболочка
xxxxxxxxxx
1
ng new library-data
Зайдите внутрь созданного проекта Angular и запустите проект:
Оболочка
xxxxxxxxxx
1
ng serve
Перейдите на домашнюю страницу и убедитесь, что все изначально работает.
Используйте компоненты PrimeNG
Сначала установите PrimeNG.
Оболочка
xxxxxxxxxx
1
npm install primeng --save
Вы должны увидеть что-то вроде этого как вывод в вашем терминале:
Затем установите Prime Icons следующей командой:
Оболочка
xxxxxxxxxx
1
npm install primeicons --save
Затем установите Font Awesome
Оболочка
xxxxxxxxxx
1
npm install font-awesome --save
Теперь вы можете установить Angular CDK:
Оболочка
xxxxxxxxxx
1
npm install @angular/cdk --save
Если мы сейчас перейдем к package.json , мы увидим следующие зависимости PrimeNG:
Откройте angular.json и добавьте следующее в раздел стилей:
JSON
xxxxxxxxxx
1
"./node_modules/primeicons/primeicons.css",
2
"./node_modules/primeng/resources/themes/nova-light/theme.css",
3
"./node_modules/primeng/resources/primeng.min.css",
Создайте новый компонент с именем displayBooks, следующим образом:
Оболочка
xxxxxxxxxx
1
ng generate component book-data
В app-routing.module.ts добавьте маршрут как книги для нашего нового Booksкомпонента.
JavaScript
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
2
import { Routes, RouterModule } from '@angular/router';
3
import { BookDataComponent } from './book-data/book-data.component';
4
const routes: Routes = [ { path: 'books', component: BookDataComponent }
6
];
7
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]
9
})
10
export class AppRoutingModule { }
Кроме того, в файле app.component.html сохраните только приведенный ниже код и удалите все, что осталось:
HTML
xxxxxxxxxx
1
<router-outlet></router-outlet>
Запустите приложение, используя:
Оболочка
xxxxxxxxxx
1
ng serve
Если мы теперь перейдем к localhost: 4200 / books, мы увидим следующее:
Добавление компонента PrimeNG DataTable в угловое приложение
Для добавления любого компонента PrimeNG в Angular мы будем выполнять следующие шаги:
Мы будем создавать компоненты и сервисные модули следующим образом:
Добавьте модуль PrimeNG Table в файл app.module.ts .
JavaScript
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
import { AppRoutingModule } from './app-routing.module';
5
import { AppComponent } from './app.component';
6
import { BookDataComponent } from './book-data/book-data.component';
7
import {TableModule} from 'primeng/table';
8
@NgModule({ declarations: [ AppComponent, BookDataComponent ], imports: [ BrowserModule, AppRoutingModule, TableModule ], providers: [], bootstrap: [AppComponent]
10
})
11
export class AppModule { }
Мы создадим сервис с именем, BookServiceкоторый будет получать Bookданные с помощью HTTP-вызова. В настоящее время мы не будем выполнять HTTP-вызов для какой-либо службы REST. Вместо этого мы получим его из файла JSON с именем books.json , который мы создадим в папке активов .
Book.json будет содержать следующее:
JSON
xxxxxxxxxx
1
{
2
"data": [
3
{"name": "The Godfather", "price": 10, "author": "Mario Puzo"},
4
{"name": "The Fellowship of the Ring", "price": 15, "author": "J.R.R. Tolkien"},
5
{"name": "Harry Potter and the Deathly Hallows", "price": 20, "author": "J.K. Rowling "}
6
]
7
}
Создайте BookServiceследующее:
Оболочка
xxxxxxxxxx
1
ng generate service book
Добавьте следующее к BookService:
JavaScript
xxxxxxxxxx
1
import { Injectable } from '@angular/core';
3
import { HttpClient } from '@angular/common/http';
4
export interface Book { name; price; author;
5
}
6
@Injectable({ providedIn: 'root'
8
})
9
export class BookService {
10
constructor(private http: HttpClient) {}
11
getBooks() { return this.http.get<any>('assets/books.json') .toPromise() .then(res => <Book[]>res.data) .then(data => { return data; }); }
12
}
Для использования из httpClient, нам нужно будет добавить HttpClientModuleв приложение-module.ts файл.
JavaScript
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
3
import { NgModule } from '@angular/core';
4
import { AppRoutingModule } from './app-routing.module';
6
import { AppComponent } from './app.component';
7
import { BookDataComponent } from './book-data/book-data.component';
8
import {TableModule} from 'primeng/table';
9
import { FormsModule } from '@angular/forms';
10
import { HttpClientModule } from '@angular/common/http';
11
@NgModule({ declarations: [ AppComponent, BookDataComponent ], imports: [ BrowserModule, AppRoutingModule, TableModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent]
13
})
14
export class AppModule { }
Измените book-dataкомпонент, чтобы получить данные поддержки для таблицы данных PrimeNG, вызвав вышеуказанную службу:
JavaScript
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import { BookService, Book } from '../service/book.service';
3
@Component({ selector: 'app-book-data', templateUrl: './book-data.component.html', styleUrls: ['./book-data.component.css']
5
})
6
export class BookDataComponent implements OnInit {
7
books: Book[];
8
constructor(private bookService: BookService) { }
9
ngOnInit() { this.bookService.getBooks(). then(books => this.books = books); }
10
}
Используйте тег p-table в файле book-data.component.html :
HTML
xxxxxxxxxx
1
<p-table [value]="books">
2
<ng-template pTemplate="header">
3
<tr>
4
<th>Name</th>
5
<th>Author</th>
6
<th>Price In Dollars</th>
7
</tr>
8
</ng-template>
9
<ng-template pTemplate="body" let-book>
10
<tr>
11
<td>{{book.name}}</td>
12
<td>{{book.author}}</td>
13
<td>{{book.price}}</td>
14
</tr>
15
</ng-template>
16
</p-table>
Если мы теперь перейдем к localhost: 4200 / hello, мы увидим следующее: