角4组分双向绑定问题

Question

我有一个数组：

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 co中的数组mponent。有什么办法可以解决这个问题吗？

我也检查了与属性的双向绑定，但没有任何工作了！

Answer 1

这样做this.data = []，你不掏空你的阵列，但有一个新的实例替换它。您的父组件和其他子组件仍然指的是原始实例，这会导致您描述的行为。

一种解决方案是空的，而不是取代它原来的数组：

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

在这样做时，所有的部件将保持指相同的数组实例，并且其状态将被正确地反映出来。

Answer 2

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

做出同样的事情工作，你必须通过Output发射物体的changed副本父component像[(appData)]="data"结合（它使用EventEmitter将数据发射到父compoent）。

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); 
    } 
} 

Demo Here