在父组件

Question

我在父组件中多次使用组件时遇到问题。我为每个控件填充了一个具有所选值的集合。更改值后，它们会正确传递给父控件 所有选择控件都包含相同的选项 问题是，当更改最后一个select元素的值时，其他两个选择将更改为相同的值。但是其他两个选择的selectedValue仍然保持正确的值 我希望这些图像能够显示效果。

页面加载初始值： 更改前两个选项后，一切正常： 但是当我更改第三个选择时，会发生错误：

子组件，显示选择控件。 select控件根据给定的@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>

Answer 1

经过几个小时的调查和调试后，我终于找到了解决方案。 原因是我已经绑定到组件第3次使用的“selectedValue”属性的名称。它不能被命名为'value'。 我将其重命名，组件现在按预期工作。