Question

我对数据绑定两个组件有疑问。第一个作为对象发送数据，第二个在对象上进行迭代并在输入中输出数据（值是每个元素的值）。当输入值更改时，我想更改第一个组件中对象的值。

multilingual-admin.component.html

<form >
  <app-iteration-multilingual *ngIf="test" [(array)] = 'test'></app-iteration-multilingual>
</form>

iteration-multilingual.component.html

<ng-container *ngFor="let item of array | keyvalue"  >
<mat-form-field class="example-full-width"  *ngIf="type(item.value) != 'object'" style="margin-left: 500px; padding-bottom: 50px;" >
  <input matInput placeholder="{{item.key}}" [(ngModel)]="item.value"  name=" " >

</mat-form-field>
  <br>
  <app-iteration-multilingual  style="margin-left: 20px;"  [(array)] = 'item.value' *ngIf="type(item.value) == 'object'"></app-iteration-multilingual>
</ng-container >

Link to stackblitz example

Answer 1

查看您的共享代码，我认为您需要检查IterationMultilingualComponent中的值更改。

您需要实现OnChanges

export class IterationMultilingualComponent implements OnInit, OnChanges {
  @Input('array') array: Array<any>;

  constructor() {
  }


  ngOnInit() {


  }
  ngOnChanges(data: SimpleChanges) {
    console.log('Input value changed');
    console.log(this.array)
    console.log(data['array'].currentValue);
    console.log(data['array'].previousValue);
  }

  console() {
    console.log(this.array);
  }
  type(item: any) {
    return typeof item;
  }

  save() {
    console.log(this.array);
  }

}

请不要使用诸如array之类的名称重命名变量。尝试保留更有意义的名称，而不要听起来像保留关键字

Angular：问题两个组成部分的数据绑定

1 个答案: