Verwenden Sie eine Komponente mehrmals in einer übergeordneten Komponente

Question

Ich habe Probleme mit einer Komponente mehrmals in einer übergeordneten Komponente. Ich bekomme für jedes Steuerelement einen Satz mit dem ausgewählten Wert. Wenn die Werte geändert werden, werden sie korrekt an das übergeordnete Steuerelement übergeben.
Alle Auswahlsteuerelemente enthalten die gleichen Optionen.
Das Problem ist, dass bei Änderung des Werts des letzten Auswahlelements die anderen zwei Auswahlpunkte auf denselben Wert wechseln. Aber der selectedValue der anderen zwei Selects behält immer noch den richtigen Wert.
Ich hoffe, dass diese Bilder den Effekt zeigen werden.

Seite mit den Anfangswerten geladen: Nachdem die ersten beiden wählt ändert alles in Ordnung ist: Aber wenn ich die dritte Auswahl ändern, passiert der Fehler:

Das Kind Komponente, die eine zeigt Wählen Sie die Kontrolle aus. Das Auswahlsteuerelement wird entsprechend einer gegebenen @Input() -Eigenschaft gefüllt.

@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<number>(); 
    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); 
    } 
} 

Die html sieht wie folgt aus:

<select [id]="id" [attr.name]="id" [(ngModel)]="selectedValue" [disabled]="disabled" class="form-control" (change)="selected()"> 
    <option *ngFor="let value of gradeValues" [ngValue]="value" [selected]="grade?.value == value">{{value}}</option> 
</select> 
{{selectedValue}} 

Diese Komponente dreimal in der übergeordneten Komponente verwendet wird:

<app-evaluation id="val1" [grade]="item" [selectedValue]="item?.val1" (onSelect)="setVal1($event)"></app-evaluation> 
<app-evaluation id="val2" [grade]="item" [selectedValue]="item?.val2" (onSelect)="setVal2($event)"></app-evaluation> 
<app-evaluation id="val3" [grade]="item" [selectedValue]="item?.value" (onSelect)="setVal3($event)"></app-evaluation> 

Answer 1

Nach einigen Stunden zu untersuchen und das Debuggen ich fand schließlich die Lösung . Der Grund ist der Name der Eigenschaft, die ich an "selectedValue" der 3. Verwendung der Komponente gebunden habe. Es darf nicht "Wert" genannt werden. Ich habe es umbenannt und die Komponenten funktionieren jetzt wie erwartet.