Блог

работая с этим удивительным компонентом, я дошел до того, что мне нужен раздел с рейтингом. этот раздел рейтинга по умолчанию имеет 5 звезд, а числовое значение поступает из вызова Api.

Мне нужно, чтобы эти звезды были заполнены желтым цветом. например :

если значение звезды равно 3 :

[проверено] [проверено] [проверено] [] [] * проверено желтыми звездами, а пустой массив — остальными 5 звездами.

пока я искал решение, я обнаружил, что ng-starring обладает этой функцией. у него есть селектор «Value», который вы можете интегрировать с ngFor

программное обеспечение valor Ngx-bootstrap не предоставляет такой функции.

Вы можете создать пользовательский канал:

Команда Angular CLI для создания канала. Введите эту команду в консоли, чтобы создать канал:

ng g pipe pipes/transformRatingStarts

• ng означает Angular CLI
• g означает генерировать
• каналы означают имя папки, в которой будет находиться канал
• transformRatingStarts означает имя канала

Код для вашего канала. Простой переключатель: (transform-rating-starts.pipe.ts)

     import { Pipe, PipeTransform } from '@angular/core';
...
    @Pipe({
      name: 'transformRatingStarts'
    })

    export class TransformRatingStartsPipe implements PipeTransform {

      transform(value: number): string {

      let response='';

       switch(value) {

          case:1
             reponse="[*] [] [] [] []";
             break;

          case:2
             reponse="[*] [*] [] [] []";
             break;

          case:3
             reponse="[*] [*] [*] [] []";
             break;
          
          case:4
             reponse="[*] [*] [*] [*] []";
             break;

          case:5
             reponse="[*] [*] [*] [*] [*]";
          break;

          default:
             reponse="[] [] [] [] []";
             break;

       }

        return response;

      }
    }
 

В вашем HTML просто добавьте канал:

 {{ yourStarValueNumericVariable | transformRatingStarts }}
 

ПРИМЕЧАНИЕ: вы должны импортировать свой канал в свой app.module.ts (или в модуль, который вы хотите использовать):

 ...
import { TransformRatingStartsPipe } from '.pipes/bank-name-image.pipe';
...

declarations: [
  AppComponent,
  ...
  TransformRatingStartsPipe ,
  ...
],
 

Вы всегда можете просто запустить консольную команду:

ng генерирует каналы / transformRatingStarts

и Angular CLI создаст для вас файл ‘transform-rating-starts.pipe.ts’ с базовой структурой и автоматически импортирует его в модуль.

Затем вам нужно будет только заполнить этот файл канала моим кодом.