更新输入数组

Question

我有一个包含子组件的父组件。父组件将一个数组传递给子组件。在子组件中，我可以对这个数组进行多项操作。我总是创建一个新数组来设置数组，以便在 UI 中更新所有内容。但是当我在父组件中访问这个数组时，它根本没有更新。

我该如何解决这个问题？

这是一个堆栈闪电战：https://stackblitz.com/edit/angular-5yah4v

Answer 1

您不能创建数组本身的副本，因为这会更改对旧数组的引用，因此对新数组的任何操作都不会对旧/传递的数组产生任何结果。

或者

如果您想限制子组件中的操作，并且只想在单击按钮后发送数据，例如“保存”按钮，那么您可以使用@Output 属性将子组件中的数组发送到父组件。 @Output 就像发出事件一样工作。

Answer 2

为什么你不只是为此使用服务

1-创建新服务并将其添加到app.module.ts

2- 在服务文件中添加你的数组并添加一个方法，当它触发时通过推送新值来更新数组。

3- 您可以在两个组件中访问此服务，无论是检索数组还是向其推送新值

4- 两个组件将获得相同的服务实例，该实例是相同的数组

Answer 3

问题：您正在更改子组件中的数组，并且网格没有收到更改通知，网格似乎只检查参考更改。 （查看this类似问题的答案）

你有两个选择

选项 1 - 使用 EventEmitter 通知父级更改

当数据改变时发出一个事件。

@Output()
onDataChanged: EventEmitter<any> = new EventEmitter();

moveToTarget() {
    this.targetList.push(this.sourceList.splice(0, 1)[0]);
    console.log('this.targetList');
    console.log(this.targetList);
    console.log('this.sourceList');
    console.log(this.sourceList);
    this.onDataChanged.emit();   // <---
}

然后在父组件中，收到事件后刷新数组

<app-picklist [sourceList]="sourceFunction" [targetList]="targetFunction" 
(onDataChanged)="refresh()"></app-picklist>

public refresh() {
    this.sourceFunction = [...this.sourceFunction];
    this.targetFunction = [...this.targetFunction];
}

Stackblitz

选项 2 - 创建共享数据服务并使用 Observable/BehaviorSubject。