问当我调用get Api angular 8时，我无法在formArray中动态创建formArray

EN

ngOnInit(){
  const items = this.json.items
  this.form = new FormGroup({
    items : new FormArray([])
  })
  let itemsForm = (<FormArray>this.form.get('items'))
  for (let i = 0; i < items.length; i++){
    itemsForm.push(this.initItem(items[i]))
  } 
}

initItem(item){
  let itemGroup = new FormGroup({
    templatename : new FormControl(item.templatename),
    tasks : new FormArray([])
  })
  let tasksItem = (<FormArray>itemGroup.get('tasks'))
  for (let i = 0; i < item.tasks.length; i++){
    tasksItem.push(new FormControl(item.tasks[i]))
  }
  return itemGroup;
}

//it's a typical getter
//if you manage the formArray directly it's not necesary(*)
get itemsArray()
{
    return this.form.get("items") as FormArray
}

//see that this function is NOT a getter -has as argument an index-
getTasks(index:number)
{
    this.itemsArray.at(index).get('tasks') as FormArray
}

setItemsArray(data: any = null): FormGroup {
    data = data || { templatename: null, tasks: null };
    return new FormGroup({
      templatename: new FormControl(data.templatename, Validators.required),
      tasks: data.tasks
        ? new FormArray(data.tasks.map(x => new FormControl(x)))
        : new FormArray([])
    });
  }

const items=new FormArray(alldata.map(x=>this.setItemsArray(x))

<form  [formGroup]="form">
    <div formArrayName="items">
        <div *ngFor="let group of itemsArray.controls;let i=index"
                      [formGroupName]="i">
           <!--here we has a inner formGroup--->
           <input formControlName="templatename">
           <div formArrayName="tasks">
                <div *ngFor="let control of getTasks(i).controls;let j=index">
                      <input [formControlName]="j">
                </div>
           </div>
        </div>
    </div>
</form>

addTask(index:number)
{
    this.getTask(index).push(new FormControl())
}
removeTask(index:number,indexTask:number)
{
    this.getTask(index).removeAt(indexTask)
}

addItem()
{
    this.itemsArray.push(this.setItemsArray())
}
removeItem(index:number)
{
    this.itemsArray.removeAt(index)
}

this.formArray=new FormArray(alldata.map(x=>this.setItemsArray(x))

getTasks(index)
{
    return this.formArray.at(i).get('tasks') as FormArray
}

<form  [formGroup]="formArray">
    <div *ngFor="let group of formArray.controls;let i=index"
                  [formGroupName]="i">
       <!--here we has a inner formGroup--->
       <input formControlName="templatename">
       <div formArrayName="tasks">
            <div *ngFor="let control of getTask(i).controls;let j=index">
                  <input [formControlName]="j">
            </div>
       </div>
    </div>
</form>