I have a form that displays the rating in form of star images, my back end stores it as a number in string format. So while i am playing arround i am wondering what the best material input would be to achieve this. I got this so far
I am using input with the below code
<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>
If there is no better mat controle to do this how do i get rid of the value 5 and be able to move my stars up. Also i hope it helps me to get rid of this error i am getting which points to this section.
SurveyResponseComponent.html:113 ERROR RangeError: Invalid array length at Object.eval [as updateDirectives] (SurveyResponseComponent.html:119) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258) at checkAndUpdateView (core.js:44270) at callViewAction (core.js:44636) at execComponentViewsAction (core.js:44564) at checkAndUpdateView (core.js:44277) at callViewAction (core.js:44636) at execEmbeddedViewsAction (core.js:44593) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44636)
The problem is not with the image but with the ngFor statement
let[].constructor(NumberConverter(form.controls.serviceValue.value))
The template compiler is not going to be able to parse that.
Create a pipe that returns an array from a number.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'arrayFromNumber'
})
export class ArrayFromNumberPipe implements PipeTransform {
transform(length) {
return Array.from({ length: length }, (_, i) => i);
}
}
And use it
*ngFor="let i of form.controls.serviceValue.value| arrayFromNumber"
See this StackBlitz https://stackblitz.com/edit/angular-mzvkyb
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.