親コンポーネントでコンポーネントを複数回使用する

Question

親コンポーネントでコンポーネントを複数回使用する際に問題が発生します。私は各コントロールに選択された値のセットを埋め込ませます。値が変更されると、親コントロールに正しく渡されます。
すべての選択コントロールには同じオプションがあります。
問題は、最後の選択要素の値を変更するとき、他の2つの選択が同じ値に変更されることです。しかし、他の2つの選択のselectedValueは正しい値を保持しています。
この画像が効果を発揮することを願っています。 をしかし、私は第三選択変更されたときに、エラーが発生：すべてがOKである最初の二つの選択を変更した後 ：

ページは、初期値をロード

表示子コンポーネント、コントロールを選択します。選択コントロールは、指定された@Input（）プロパティに従って設定されます。

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

HTMLは次のようになります。私は最終的に解決策を見つけた調査とデバッグのいくつかの時間後

<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

：

<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}} 

このコンポーネントは、親コンポーネント中で3回使用されています。 理由は、コンポーネントの3番目の使用法の 'selectedValue'にバインドしたプロパティの名前です。 「値」という名前にすることはできません。 名前を変更し、コンポーネントが正常に機能するようになりました。