Ngx-Bootstrap - Xếp hạng

Thành phần xếp hạng ngx-bootstrap cung cấp thành phần xếp hạng có thể định cấu hình, thanh dấu sao theo mặc định.

RatingComponent

bộ chọn

• rating

Đầu vào

• customTemplate - TemplateRef <any>, mẫu tùy chỉnh cho các biểu tượng.

• max- số, không. biểu tượng, mặc định: 5.

• readonly - boolean, nếu true sẽ không phản ứng trên bất kỳ sự kiện nào của người dùng.

• titles - string [], mảng tiêu đề biểu tượng, mặc định: ([1, 2, 3, 4, 5])

Kết quả đầu ra

• onHover - được kích hoạt khi chọn biểu tượng, $ event: number tương đương với xếp hạng đã chọn.

• onLeave - được kích hoạt khi biểu tượng được chọn, $ event: số bằng với giá trị xếp hạng trước đó.

Thí dụ

Vì chúng tôi sẽ sử dụng xếp hạng, chúng tôi phải cập nhật app.module.ts được sử dụng trong chương ProgressBar của ngx-bootstrap để sử dụngRatingModule, RatingConfig.

Cập nhật app.module.ts để sử dụng RatingModule và RatingConfig.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng xếp hạng.

test.component.html

<rating [(ngModel)]="value" 
   [max]="max" 
   [readonly]="false" 
   [titles]="['one','two','three','four']"></rating>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   max: number = 10;
   value: number = 5;
   constructor() {}
   ngOnInit(): void {
   } 
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200. Nhấp vào nút Mở phương thức và xác minh kết quả sau.