Question

我有一个父组件，它有一个对象数组

this.arr = [
{
   style :'sample.css',
   disabled : this.formControl.valid
},
{
    style : 'sample.css',
    disabled : this.formControl.valid
}];

注意：this.formControl.valid指示表单是否脏。

我将此数组传递给子组件

<child-component [controlConfiguration] ='arr'></child-component>

在子组件中，我暴露了一个输入变量

export class ChildComponent{
       @Input()
       controlConfiguration : any;
}

ChildComponent具有以下html

<div>
   <button *ngFor='let item of controlConfiguration'  [disabled]='!item.disabled' ></button>
</div>

更改不会从父组件传播到子组件，因为预期结果是只要表单生效，按钮就会启用。

如何做到这一点.... ??＆gt;

Answer 1

每次输入值更改时，您都需要更新displayText的属性this.arr，因为this.inputText是基元。我添加了(ngModelChange)="update($event)和update(value) {...}方法：

<input type='text' [(ngModel)]='inputText' (ngModelChange)="update($event)">
...
export class ParentComponent {
  inputText : string;

  arr = [{
    displayText : this.inputText
  },{
    displayText : this.inputText
  }];

  update(value) {
    this.arr[0].displayText = value;
    this.arr[1].displayText = value;
  }

这是working plunker。

如何将角度为2的父组件中的对象数组双向绑定到子组件

1 个答案: