Angular 4组件双向绑定问题

发布时间：2020-12-17 09:16:36 所属栏目：安全来源：网络整理

导读：我有一个数组： const a = [apple,ball,cat] 我将它传递给两个组件： app-header [appData]="data" /app-headerlist-todo [appData]="data" [getData]="getData" [setData]="setData" /list-todo 在appHeader组件中, export class appHeader { @Input('appDa

我有一个数组：

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组件中的数组.有什么方法可以解决这个问题吗？

我还检查了两种方式绑定属性,但没有任何工作了！

通过执行this.data = [],您不会清空您的数组,而是将其替换为新实例.您的父组件和另一个子组件仍然引用原始实例,这会导致您描述的行为.

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

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

这样,所有组件将继续引用相同的数组实例,并且将正确反映其状态.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!