Làm thế nào để bạn sử dụng phân trang NGB?

Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?

Cần có phân trang trong mọi Ứng dụng web để hiển thị danh sách dữ liệu trên trang web, có nhiều công cụ của Bên thứ ba có sẵn trong ứng dụng Angular để hiển thị phân trang, ở đây trong bài viết này, chúng tôi đã triển khai công cụ ng-bootstrap để hiển thị phân trang. Ng-bootstrap Pagination rất dễ sử dụng và dễ triển khai cho ứng dụng Angular, hãy tham khảo các bước sau để hiển thị Pagination trên ứng dụng Angular bằng công cụ ng-bootstrap

Ứng dụng mẫu này có thể được truy cập tại đây. https. // stackblitz. com/edit/angular-8-ng-bootstrap-simple-pagination

Thực hiện theo các bước bên dưới và viết mã như được hiển thị trong các bước sau để đạt được phân trang trên trong ứng dụng Angular 8 của bạn.  

Bước 1. Tạo Ứng dụng Angular 8 của bạn bằng lệnh sau

ng MyAngularApp mới

Bước 2. Mở mã bằng lệnh sau trong Visual Studio Code hoặc bạn có thể bỏ qua bước này nếu bạn đã mở ứng dụng trong trình chỉnh sửa

cd MyAngularApp
mã số

Bước 3. Chạy lệnh sau để cài đặt ng-bootstrap trong ứng dụng của bạn. Sau khi cài đặt ng-bootstrap trong ứng dụng của bạn, bạn có thể sử dụng tất cả các widget ng-bootstrap trong ứng dụng của mình. Bạn có thể biết về tất cả các thành phần từ

cài đặt npm --save @ng-bootstrap/ng-bootstrap

Bước 4. Bây giờ, hãy mở ứng dụng. mô-đun. ts và thêm câu lệnh nhập sau và thêm mô-đun "NgbModule" vào câu lệnh nhập @NgModule như hình bên dưới

nhập {NgbModule} từ '@ng-bootstrap/ng-bootstrap';


@NgModule[{
nhập khẩu. [ BrowserModule, NgbModule ],
tuyên bố. [ Thành phần ứng dụng ],
khởi động. [ Thành phần ứng dụng ]
}]

Bước 5. Thêm dòng mã sau vào các thành phần. ts nơi bạn muốn hiển thị phân trang, trong ví dụ này, chúng tôi đã hiển thị nó trên trang chủ của ứng dụng

nhập { Thành phần } từ '@angular/core';
@Thành phần[{
bộ chọn. 'ứng dụng của tôi',
mẫuUrl. '. /ứng dụng. thành phần. html',
phong cáchUrl. ['. /ứng dụng. thành phần. css' ]
}]
xuất lớp AppComponent  {
name = 'Góc';
trang = 1;
kích thước trang = 10;
mục = [];
hàm tạo[] {
for[hãy i = 1; i

Chủ Đề