如何以实际角度显示图像/星形

Question

我有一个以星图形式显示评分的表格，我的后端以字符串格式将其存储为数字。因此，当我玩游戏时，我想知道实现这一目标的最佳材料投入是什么。到目前为止我知道了

我正在使用带有以下代码的输入

<mat-form-field>
   <input matInput placeholder="Service Value"
    formControlName ="serviceValue">
    <span>
    <ng-container *ngFor="let[].constructor(NumberConverter(form.controls.serviceValue.value))">
       <img class="star" src="../../assets/images/basic-5-point-gold-star-beveled.jpg" />
    </ng-container>
   </span>
</mat-form-field>

如果没有更好的打击垫控制方法，该如何摆脱5的值并使我的星星向上移动。我也希望它能帮助我摆脱指向该部分的错误。

  

SurveyResponseComponent.html：113错误RangeError：无效的数组   长度       在Object.eval [作为updateDirectives]（SurveyResponseComponent.html：119）       在Object.debugUpdateDirectives [作为updateDirectives]（core.js：45258）       在checkAndUpdateView（core.js：44270）       在callViewAction（core.js：44636）       在execComponentViewsAction（core.js：44564）       在checkAndUpdateView（core.js：44277）       在callViewAction（core.js：44636）       在execEmbeddedViewsAction（core.js：44593）       在checkAndUpdateView（core.js：44271）       在callViewAction（core.js：44636）

Answer 1

问题不在于图像，而在于ngFor语句

let[].constructor(NumberConverter(form.controls.serviceValue.value))

模板编译器将无法对其进行解析。

创建一个从数字返回数组的管道。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'arrayFromNumber'
})
export class ArrayFromNumberPipe implements PipeTransform {
  transform(length) {
    return Array.from({ length: length }, (_, i) => i);
  }
}

并使用它

*ngFor="let i of form.controls.serviceValue.value| arrayFromNumber"

请参阅此StackBlitz https://stackblitz.com/edit/angular-mzvkyb