@input 在同一组件的不同实例中 angular 问题

Question

I have an angular 9 project and in this project there is a component which is a customized select option called custom-select-option. In this component i have an @input which is options of custom select. A select when selected should be hided from list. When i give same data retrieved from an API to multiple instances of this component when i select one option it hides from both instances, but it must hide from instance which clicked.

in custom-select-option component:

  @Input() public data: customSelectOptionData[];
  onOptionSelected(text: string | number, value: any): void {
  this.isListOpen = false;
  this.titleSpan.nativeElement.innerHTML = text;
  if (this.controlName) this.inputHidden.nativeElement.value = value;
  if (this.parentFormGroup && this.controlName) 
  this.parentFormGroup.get(this.controlName).setValue(value)
  this.optionSelected.emit(String(value));
  this.data.forEach(item => {
  if (item.value === this.selectedOption.value) {
    item.hide = false;
  }
  if (item.value === value) {
    item.hide = true;
  }
  });
  this.selectedOption.text = text;
  this.selectedOption.value = value;

}

in app component ts:

  this.style.getAllStyles().pipe(take(1)).subscribe(data => {
  this.mainInstrumentStyles = [...data];
  this.secondInstrumentStyles = [...data];
  });

in app component html

<custom-select-option [data]="mainInstrumentStyles]></custom-selec-option>
<custom-select-option [data]="secondInstrumentsStyle]></custom-selec-option>

how can i prevent these instances effect on each other input data?

Answer 1

Most probably you are sending references of the same object to multiple component instances. Try to create a deep copy like following

this.style.getAllStyles().pipe(take(1)).subscribe(data => {
  this.mainInstrumentStyles = JSON.parse(JSON.stringify([...data]));
  this.secondInstrumentStyles = JSON.parse(JSON.stringify([...data]));
});