我如何以材质角度形式显示图像/星

Question

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

我使用下面的代码输入

<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 [as updateDirectives] (SurveyResponseComponent.html:119) 在 Object.debugUpdateDirectives [as 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