Angular 4 组件双向绑定问题

Question

I have an array:

const a = [apple,ball,cat]

我正在将此传递给两个组件：

<app-header [appData]="data"  ></app-header>

<list-todo [appData]="data" [getData]="getData" [setData]="setData" ></list-todo>

在 appHeader 组件中，

export class appHeader  {
  @Input('appData') data : any

  clear(){
    this.data = []
  }
}

执行clear()函数不会影响listTodo组件中的数组。有没有办法解决这个问题？

我还尝试了使用属性进行双向绑定，但是仍然没有效果！

- Ashkar Km

Answer 1

Input绑定以单向方式向子组件发送数据，因此当我们修改子组件数据时，它不会向上流动。由于您正在将新的空数组分配给子组件中的this.appData（它不会向上流动），在这种情况下，您可以考虑将appData属性绑定更改为双向绑定。因此，在子组件中更新任何内容都将更新父组件中的相关属性，但是是的，这并不会自动发生。您必须手动更新数据;)

要使相同的事情起作用，您必须通过Output绑定向父component发出对象的changed副本，例如[(appData)]="data"（它使用EventEmitter将数据发射到父级组件）。

AppComponent模板

 <app-header [appData]="data"  ></app-header>
<list-todo [(appData)]="data"></list-todo>

ListTodoComponent

@Component({
  selector: 'list-todo',
  template: `
     <ul>
      <li *ngFor="let item of appData">{{item}}</li>
     </ul>
     <button (click)="clear()">Clear</button>
  `
})
export class ListTodoComponent { 
  @Input() appData;
  @Output() appDataChange: EventEmitter<any> = new EventEmitter<any>();

  clear(){
    this.appData = [];
    //this emit is important to send data back to parent.
    //make sure you should have `Change` prefix to bounded value, like `appData` + `Change` = `appDataChange`, 
    //which ultimately saves few lines of code.
    this.appDataChange.emit(this.appData); 
  }
}

查看演示

- Pankaj Parkar

---

你的评论让我省了些麻烦，我简直无法相信名称必须与属性相同并以 "Change" 结尾——不允许使用其他名称！将它重命名为 appDataChanged（末尾加上“d”）会使其不返回值给父级！ - FiniteLooper

Answer 2

通过执行this.data = []，你并没有清空数组，而是用一个新实例替换了它。你的父组件和其他子组件仍然引用原始实例，这导致了你描述的行为。

一个解决方案是清空原始数组而不是替换它：

clear() {
    this.data.length = 0;
}

这样做的话，所有组件将继续引用同一数组实例，并且其状态将被正确反映。

- Robby Cornelissen

---

谢谢兄弟，它运行得很好！！ - Ashkar Km