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。

更新输入数组

3 个答案:

Stackblitz