Question

我的父组件中有：

 obj: any = { row1: [], row2: [], total: [], sumTotal: 0 };

我将obj传递给子组件：

<tr table-tr-tr *ngFor="let key1 of channels[name];let i=index" [key1]="key1" [data]="array" [field]="key1"
      [width]="width" [plantype]="plantype" [custom]="custom" [i]="i" [row]="row" [obj]="obj"></tr>
  </table>

在子组件中，我有这个：

  ngOnInit() {
    for (let index = 0; index < this.data.length; index++) {
      this.array.push({ code: index, value: 0 });
    }
    this.obj['row2'][this.field] = this.array;

  }

在此子组件中，我还有另一个子组件，在其中我更改了数组的值，但在我的父对象上没有更改。任何建议，我怎么能做到这一点？

Answer 1

在此子组件中，我还有另一个子组件，其中更改数组的值，但在我的父对象上不更改。

在Angular中，父组件和子组件之间的数据流不是双向的。因此，您在子组件中所做的更改不会反映在父组件中。

您可以使用EventEmitter将事件从子组件发送到父组件。

子组件：

在子组件中，声明一个EventEmitter对象。

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

然后在子组件的任何位置使用emit方法将数据发送到父组件。

// Update parent component data.
this.updateObjDataEvent.emit(obj);

父组件：

在您的父组件模板中，订阅此事件：

<app-child-component-selector (updateObjDataEvent)="updateObj($event)">
</app-child-component-selector>

然后在您的父组件中，创建updateObj()方法来处理子组件中的数据更新。

updateObj(data) {
  // Do something.
}

在updateObj()方法中，您可以更新父组件的数组对象。

Answer 2

您应该尝试使用服务将值从一个组件传递到另一个组件。 https://www.youtube.com/watch?v=69VeYoKzL6I

角度-将数据传递到父组件

2 个答案: