Ngx-Bootstrap Rating 组件动态值

Question

当我使用这个令人惊叹的组件时，我到达了一个需要评级部分的地方。这个评级部分，默认有 5 颗星，一个数值来自 Api 调用。

我需要让那些充满黄色的星星。例如：

如果星值为3：

[选中][选中][选中][][] *选中的是黄色星星，空数组是其余 5 颗星

在寻找解决方案时，我发现 ng-starring 具有此功能。它有一个“值”选择器，您可以将其与 ngFor

集成

valor 软件 Ngx-bootstrap 不提供这样的功能。

Answer 1

您可以创建自定义管道：

Angular 用于创建管道的 CLI 命令。在您的 控制台 中键入此命令以创建管道：

ng g管pipes/transformRatingStarts

ng 表示 Angular CLI
g表示生成
pipes 表示管道所在的文件夹名称
transformRatingStarts表示管道名称

你的管道代码。一个简单的开关： (转换评级-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生成管道pipes/transformRatingStarts

和 Angular CLI 将为您创建具有基本结构的文件 'transform-rating-starts.pipe.ts' 并将其自动导入到模块中。

然后，你只需要用我的代码填充那个管道文件。

Ngx-Bootstrap Rating 组件动态值

Ngx-Bootstrap Rating Component dynamic value

css

rating

ngx-bootstrap

angular