Use a component multiple times in a parent component

Home / Uncategorized / Use a component multiple times in a parent component

Question:
I have issues using a component multiple times in a parent component. I get each control filled an set with the selected value. When the values are changed they get passed to the parent control correctly.
All select controls contain the same options.
The problem is, that when changing the value of the last select element, the other two selects change to the same value. But the selectedValue of the other two selects still holds the correct value.
I hope this images will show the effect.

Page loaded with initial values: After changing the first two selects everything is ok: But when I change the third select, the error happens:
The child component, which displays a select control. The select control is filled according to a given @Input() property.
@Component({
selector: ‘app-evaluation’,
templateUrl: `./evaluation.component.html?v=${new Date().getTime()}`,
styleUrls: [‘./evaluation.component.css’]
})
export class EvaluationComponent implements OnInit, OnChanges {
@Input() private grade: GradeDetail = null;
@Input() private selectedValue: number = null;
@Input() private disabled: boolean = false;
@Output() private onSelect = new EventEmitter();
private gradeValues: number[] = null;
private id: string;

constructor(elm: ElementRef) {
this.id = elm.nativeElement.getAttribute(‘id’);
}

ngOnInit() {
}

ngOnChanges() {
this.gradeValues = [];
if (this.grade == null) return;
for (let i = this.grade.minValue; i <= this.grade.maxValue; i = i + this.grade.discretization) { this.gradeValues.push(i); } } selected() { this.onSelect.emit(this.selectedValue); } } The html looks like this:
{{selectedValue}}

This component is used three times in the parent component:


Answer:

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *