Ngx-Bootstrap Rating 组件动态值答案

【问题标题】：Ngx-Bootstrap Rating Component dynamic valueNgx-Bootstrap Rating 组件动态值
【发布时间】：2022-01-13 06:16:11
【问题描述】：

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

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

如果星值为 3：

[已选中] [已选中] [已选中] [] [] *检查为黄色星星，空数组为其余 5 颗星星

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

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

【问题讨论】：

标签： css angular ngx-bootstrap rating

【解决方案1】：

您可以创建自定义管道：

Angular CLI 命令创建管道 在你的控制台中输入这个命令来创建一个管道：

ng g pipe 管道/transformRatingStarts

ng 表示 Angular CLI g 表示生成 pipes 表示管道所在的文件夹名称 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;
...
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”，并将其自动导入到模块中。

然后，您只需用我的代码填充该管道文件。

【讨论】：