推入子组件未更新时的数组，在Angular Behavior中

如何解决推入子组件未更新时的数组，在Angular Behavior中

这是我的孩子。仍然从父级监听更改数据，但是在我的代码中，ArrayObjectParser不监听更改。那么这里有什么主意吗？请帮助我。

import { Component,OnInit,Inject,ViewChild,Input } from '@angular/core';
import { FormTemplateModel,PageBuilderModel,SectionLayoutModel,EntityMappings } from '../../models/dynamic-form.model'
import { BehaviorSubject } from 'rxjs';
import { skipWhile,take } from 'rxjs/operators';
@Component({
  selector: 'm-entity-mappping',templateUrl: './entity-mappping.component.html',styleUrls: ['./entity-mappping.component.scss']
})
export class EntityMapppingComponent implements OnInit {

  private _obsers: any[] = [];

  @ViewChild('inputControl') nameInput: any;

  @Input()
  set data(value) {
    this.viewData.TemplateData$.next(value);
  };

  get data() {
    return this.viewData.TemplateData$.getValue();
  }

  constructor() { }

  viewModel: any = {
    DynamicPreview: new FormTemplateModel()
  }

  viewData: any = {
    TemplateData$: new BehaviorSubject<FormTemplateModel>(null),FormEntityData: new Array<EntityMappings>()
  };

  ngOnInit(): void {
    this.bindSubscribes();
  }

  ngOnDestroy() {
    for (let obs of this._obsers) {
      obs.unsubscribe();
    }
  }
  
  parserDataToObjectEntity(data: FormTemplateModel) {
    const ArrayObjectParser = [];
    data.LayoutBuilder.forEach((element: PageBuilderModel) => { //Still working right here
      element.SectionLayouts.forEach((section:SectionLayoutModel) => {
        if (section.Type == "Container") {
          section.FieldLayouts.forEach((field:SectionLayoutModel) => { //Breaking right here

            let object : EntityMappings  = {
              Id: field.Id,Title: field.Title,EntityProperty: ""
            }            
            ArrayObjectParser.push({ ...object });
          })
        }
        else {
          let object = {
            Id: section.Id,Title: section.Title,EntityProperty: ""
          }
          ArrayObjectParser.push({ ...object });
        }
      })
    }); 
    console.log(ArrayObjectParser);
    return ArrayObjectParser;
  }


  private bindSubscribes() {

    this._obsers.push(
      this.viewData.TemplateData$.subscribe((value: FormTemplateModel) => {
        this.parserDataToObjectEntity(value);
      })
    );
  };


}

我的目的是将数据从父级发送到另一个数组。

我希望每次父母更改数据时，我的数据都将被更改，但是我的代码在按原样使用时无效。

也许是因为我使用了错误的foreach吗？

我来的示例数据

{
  "Id": "","Name": {
    "vi": "Name"
  },"LayoutBuilder": [
    {
      "Id": "Page1","Title": {
        "vi": "ten page","en": "page name"
      },"Order": 1,"SectionLayouts": [
        {
          "Id": "Page1_Section1","Title": {
            "vi": "Phan"
          },"Type": "Container","FieldLayouts": [
            {
              "Id": "Page1_Section1_Field1","Title": {
                "vi": "Cau hoi"
              },"Type": "Input","Required": false,"SubType": "Text"
            }
          ]
        }
      ]
    }
  ]
}

然后FormEntityData变成ArrayObjectParser，就像这里

    "EntityMappings":[
        {
            "Id":"Page1_Section1_Control1","Title":{"vi":"Ten field","en":"Field Name"},"EntityProperty":"Hovaten"
        },{
            "Id":"Page1_Section1_Control2","EntityProperty":"Email"
        }
    ],

解决方法

输入属性仅侦听更改对象的引用，而不侦听数据本身。如果您希望每次将数据下推到子组件，则需要创建一个新数组。

<child [data]="data"></child>

如果您执行this.data.push(val)，则不会触发input属性识别新数组，因为它仍然是对数组的引用。要触发输入属性，您需要使用this.data = [...this.data,val]将数据更改为对新数组的引用，因为数据现在是新对象，并且输入属性将触发。

这是一个StackBlitz，它创建一个新的数组https://stackblitz.com/edit/angular-ivy-mqvdf6?file=src%2Fapp%2Fapp.component.ts

这是将数据推入数组https://stackblitz.com/edit/angular-ivy-pfcms1?file=src%2Fapp%2Fapp.component.ts

的一个

请注意，第一个单击是如何触发每次单击的setter属性的，而第二个则不会。