angular8 + ng-zorro 子组件更新数据 引发内存溢出问题

Question

问题描述

感谢查看！
我在列表中添加了一个单选组件，每个组件都是在维护一个共同列表数据结构。
每个单选触发后，会将单选内部的子数据添加至列表数据。
例如：盲选的单盲内有单盲附加项，则在选择单盲后，单盲附加项会添加至盲选下面。
就像这样
但是，我一点
浏览器就崩溃了！

问题出现的环境背景及自己尝试过哪些方法

"@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "ng-zorro-antd": "^8.0.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

相关代码

radio.ts

import {Component, Input, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-radio',
  styleUrls: ['../template.component.less'],
  template: `
      <nz-radio-group [(ngModel)]="formData.value" name="radio" (ngModelChange)="radioChange($event)">
          <label nz-radio *ngFor="let item of formData.dimension.options" nzValue="{{item.value}}"
                 [nzDisabled]="formData.disabled"
          >{{item.label}}</label>
      </nz-radio-group>
  `,
})
export class Radio implements OnInit {
  @Input() formData: any;
  @Input() parentData: any;

  constructor(
  ) {
  }

  ngOnInit() {
  }

  radioChange(event){
    const optList = this.formData.children.filter(ele => ele.value === this.formData.value);

    this.parentData[0].children = [...this.parentData[0].children,...optList];
  }
}

template.ts

<app-radio *ngIf="formData.type === '单选'" [formData]="formData" [parentData]="parentData"></app-radio>

parent.ts

<div *ngFor="let modal of scaleList">
            <h2>{{modal.label}}</h2>
            <div *ngFor="let theme of modal.children">
                <app-template [parentData]="scaleList" (changeCheckbox)="test($event)" [formData]="theme"></app-template>
            </div>
        </div>

你期待的结果是什么？实际看到的错误信息又是什么？

希望子组件能够正常更新数据，错误信息如下
Maximum call stack size exceeded

Answer 1

等待大神解答