Angular 角度：无法使用@Input再次重置子组件中的值

有一个子组件来处理下拉列表。父组件有一个重置按钮，用于将用户所做的选择重置为下拉列表中的“无”（子组件）

下面是代码的链接

app.component.html：

   <app-child [serverData]="serverData" [selectedInpValue]="selectedValue" (selectedComboBoxItemEvent)="getSelectedItem($event)"></app-child>
   <!-- reset button -->
   <button (click)="resetData()">Reset Selection</button>

---

子组件.ts

---

child.component.html

由于在第二次单击时，输入属性SelectedInvalue与第一次单击时的值相同，因此不会触发ngOnChanges，也不会进行重置

---

如何解决此问题？

您可以使用set函数。每次更改输入时都会调用此函数。若您可以更新serverdata值，则某些值会反映在子组件上

@Input() set serverData(value) {
  // do some task
}

---

您需要在下面提到的子组件上添加一个简单的更改检测事件

ngOnChanges(changes: { [property: string]: SimpleChange }) {  

// Extract changes to the input property by its name    

let change: SimpleChange = changes['data'];  

// Whenever the data in the parent
changes, this method gets triggered. You    can act on the changes
here. You will have both the previous value and the    current value
here.  
}

有关更多详细信息，请查看此答案

---

您需要每次更改它的引用，如

this.selectedValue = Object.assign({}, this.selectedValue);

---

请检查此处的工作代码

当孩子更新数据时，不会通知家长。家长第一次发送“无”选项。然后子对象更新数据。然后，父级再次发送None选项，该选项正确地保持与前一个输入相同，因此ngOnChanges不会触发。因此，您可以传递第三个输入（例如布尔值），每次单击“重置”时都会更新这些值

母公司

updateChild:boolean = false;

resetData() {
    this.serverData[0].isSelected = true;
    this.selectedValue = this.serverData[0];
    this.updateChild = !this.updateChild;
}

<app-child [serverData]="serverData" [selectedInpValue]="selectedValue" [reset]="updateChild"
  (selectedComboBoxItemEvent)="getSelectedItem($event)" ></app-child>

<button (click)="resetData()">Reset Selection</button>

---

首先，如果要为selectedItem赋值，第一个属性为isSelected equal true的人应该在输入中使用getter，而不是ngOnInit

  selectedItem: any;
  _serverData:any[]
  @Input()
  set serverData(value)
  {
    this._serverData=value;
    this.selectedItem = this.serverData.find(data => data.isSelected);
  }
  get serverData()
  {
     return this._serverData
  }

其次，要“更改”数组，您需要创建一个副本，而不是更改单个元素。您认为数组是内存的一个点，您更改了内容，但内存的位置是相同的

resetData() {
    this.serverData[0].isSelected = true;
    this.serverData=[...this.serverData]
  }

---

使用此

@Input（）set serverData（value）{}

我仍然无法实现它。看看你是否能修改代码，让我更好地理解。问题中提供了链接。我仍然无法实现它。看看你是否能修改代码，让我更好地理解。在问题中提供了链接。而不是公开新属性。关于这个this.selectedValue=Object.assign（{}，this.selectedValue）；我认为它将执行相同的操作this.selectedValue=Object.assign（{}，this.selectedValue）；这也是一个好的、干净的方法

this.selectedValue = Object.assign({}, this.selectedValue);

updateChild:boolean = false;

resetData() {
    this.serverData[0].isSelected = true;
    this.selectedValue = this.serverData[0];
    this.updateChild = !this.updateChild;
}

<app-child [serverData]="serverData" [selectedInpValue]="selectedValue" [reset]="updateChild"
  (selectedComboBoxItemEvent)="getSelectedItem($event)" ></app-child>

<button (click)="resetData()">Reset Selection</button>

 @Input() reset:any;

  selectedItem: any;
  _serverData:any[]
  @Input()
  set serverData(value)
  {
    this._serverData=value;
    this.selectedItem = this.serverData.find(data => data.isSelected);
  }
  get serverData()
  {
     return this._serverData
  }

resetData() {
    this.serverData[0].isSelected = true;
    this.serverData=[...this.serverData]
  }