使用 ngOnChanges 检测两次分配相同值的属性

Question

所以基本上我有一个对象数组，我想通过@Input将数组中选定对象的索引提供给另一个组件。

The problem is, when selecting the same item twice the ngOnChanges function doesn't detect a change since it doesn't recognize it as a change when I set the value from 1 to 1... This results in me无法连续两次选择同一个对象。

子组件：

@Input('editAppointmentIndex') editAppointmentIndex: number;


ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    if (changes.editAppointmentIndex && changes.editAppointmentIndex.currentValue != undefined) {
      // Do what i want to do with the selected object
    }
}

父组件：

<child-component [editAppointmentIndex]="currentAppointmentIndex"></child-component>

currentAppointmentIndex: number;

onEdit(i) {
    this.currentAppointmentIndex = i;
}

兄弟组件：

<button class="edit" (click)="onEdit(i)">Edit</button>

@Output() onEdit_: EventEmitter<number> = new EventEmitter<number>();

onEdit(i) {
    this.onEdit_.emit(i);
}

Answer 1

当数字保持不变时，它不是新值，因此OnChanges 不会触发。

我不觉得传递带有索引的对象来解决这个问题太不方便了。所以我建议如下：

editAppointmentIndex = {};

onEdit(i) {
  this.editAppointmentIndex = { index: i };
}

然后你会得到索引：

if (changes.editAppointmentIndex.currentValue && changes.editAppointmentIndex.currentValue.index != undefined) {
  console.log(this.editAppointmentIndex.index)
}

演示：StackBlitz

Answer 2

您也可以将@Input 与 setter 一起使用

oldValue:number;
@Input()
set editAppointmentIndex(value: number) {
  if (value&&value!=this.oldValue) {
  // Do what i want to do with the selected object
  }   
 this.oldValue = value;
}