在父組件中多次使用組件

我在父組件中多次使用組件時遇到問題。我讓每個控件都填充了一組選定的值。當值更改時，它們會正確傳遞給父控件。
所有選擇控件都包含相同的選項。
問題是，當更改最後一個select元素的值時，其他兩個選擇會更改爲相同的值。但其他兩個選擇的selectedValue仍然保持正確的值。
我希望這張圖片能夠顯示效果。

頁加載有初始值：但是，當我改變第三選擇，錯誤發生：改變前兩個選擇一切正常後在父組件中多次使用組件

的子組件，它顯示一個選擇控制。根據給定的@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如下：

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

此組件用於三次父組件：

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

來源

2017-08-15 Manuel Koch

調查和調試的幾個小時後，我終於找到了解決辦法。原因是我已經綁定到組件第三用法的'selectedValue'的屬性的名稱。它不能被命名爲'價值'。我重新命名了它，並且組件現在按預期工作。

來源

2017-08-15 12:15:14

在父組件中多次使用組件

回答

相關問題