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

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 [as updateDirectives]（core.js：45258）在checkAndUpdateView（core.js：44270）处无效的数组长度在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