如何在angular 2中将对象数组双向绑定到子组件

在Angular 2中，可以通过使用属性绑定和事件绑定来实现将对象数组双向绑定到子组件。

首先，在父组件中定义一个对象数组，并将其传递给子组件。可以使用属性绑定将该对象数组传递给子组件的输入属性。在父组件的模板中，使用方括号语法将对象数组绑定到子组件的输入属性。例如：

<app-child [data]="objectArray"></app-child>

在子组件中，需要使用@Input()装饰器来接收父组件传递的对象数组。在子组件的类中，定义一个输入属性，并使用@Input()装饰器来监听该属性的变化。例如：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `
})
export class ChildComponent {
  @Input() data: any[];
}

这样，当父组件中的对象数组发生变化时，子组件会自动更新以反映这些变化。

另外，如果想要在子组件中修改父组件中的对象数组，可以使用事件绑定。在子组件中，可以定义一个输出属性，并使用@Output()装饰器来发送事件。当子组件中的对象数组发生变化时，可以触发该事件并将修改后的对象数组作为参数传递给父组件。在父组件的模板中，使用圆括号语法将子组件的输出属性绑定到一个父组件中的方法。例如：

<app-child [data]="objectArray" (dataChange)="updateData($event)"></app-child>

在子组件中，可以使用EventEmitter来定义一个输出属性，并使用emit()方法来触发事件。例如：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="changeData()">Change Data</button>
  `
})
export class ChildComponent {
  @Input() data: any[];
  @Output() dataChange: EventEmitter<any[]> = new EventEmitter<any[]>();

  changeData() {
    // 修改对象数组
    this.data.push('New Item');
    // 触发事件并传递修改后的对象数组
    this.dataChange.emit(this.data);
  }
}

在父组件中，可以定义一个方法来接收子组件发送的事件，并更新父组件中的对象数组。例如：

export class ParentComponent {
  objectArray: any[] = ['Item 1', 'Item 2', 'Item 3'];

  updateData(newData: any[]) {
    this.objectArray = newData;
  }
}

这样，当子组件中的按钮被点击时，父组件中的对象数组会被修改，并且子组件会自动更新以反映这些变化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供了可靠、安全、高性能的云计算服务，可用于部署和运行Angular应用程序。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务，可用于存储和管理应用程序的数据。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云云数据库MySQL产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql