Angular 角度2+;removeAt函数在子组件中不起作用

Angular 角度2+;removeAt函数在子组件中不起作用,angular,forms,angular4-forms,angular-forms,Angular,Forms,Angular4 Forms,Angular Forms,我在angular4中使用模型驱动 我通过@input将formarray传递给子组件,当我使用removeAt捕获错误时: removeAt不是一个函数 我的父组件.html <form class="ui form" [formGroup]="gform" (ngSubmit)="doSave(gform.value)"> <app-tag-input [_input]="spectra.controls" ></app-tag-input> </

我在angular4中使用模型驱动

我通过
@input
formarray
传递给子组件,当我使用removeAt捕获错误时:

removeAt不是一个函数

我的父组件.html

<form class="ui form" [formGroup]="gform" (ngSubmit)="doSave(gform.value)">
<app-tag-input [_input]="spectra.controls"  ></app-tag-input>
</form>
<div class="tagsinput">
  <span *ngFor="let item of _input let i=index" class="ui teal  label">
    {{item.value}}
    <i class="close icon" (click)="removeSpectrum(i)"></i>

  </span>
  <input type="text"  [(ngModel)]="tagEntry"  [ngModelOptions]="{standalone: true}" (keyup.enter)="addToInput()"/>
</div>
childcoponent.ts:

export class TagInputComponent implements OnInit {

@Input() _input :FormArray;
tagEntry:string;

  constructor(private formBuilder:FormBuilder) {
    formBuilder.array
    }
  addToInput() {
    const formGroup=this.formBuilder.control(
      this.tagEntry
    );
    const order = this._input.length + 1;
    this._input.push(formGroup)
    this.tagEntry='';

  }
  removeSpectrum=(i: number)=> {

    const control = <FormArray>this._input;

    control.removeAt(i);
  }
  ngOnInit() {

  }

}
导出类TagInputComponent实现OnInit{
@输入();
标记项:字符串;
构造函数(专用formBuilder:formBuilder){
formBuilder.array
}
addToInput(){
const formGroup=this.formBuilder.control(
这是一个标记条目
);
常量顺序=此。_input.length+1;
此._input.push(formGroup)
this.tagEntry='';
}
removeSpectrum=(i:number)=>{
const control=此输入;
控制。移除(i);
}
恩戈尼尼特(){
}
}
my child component.html

<form class="ui form" [formGroup]="gform" (ngSubmit)="doSave(gform.value)">
<app-tag-input [_input]="spectra.controls"  ></app-tag-input>
</form>
<div class="tagsinput">
  <span *ngFor="let item of _input let i=index" class="ui teal  label">
    {{item.value}}
    <i class="close icon" (click)="removeSpectrum(i)"></i>

  </span>
  <input type="text"  [(ngModel)]="tagEntry"  [ngModelOptions]="{standalone: true}" (keyup.enter)="addToInput()"/>
</div>

{{item.value}}

当我在两个组件中控制台formarray时,父组件
光谱中存在一个控制对象,而子组件中的输入中不存在该控制对象。

这是因为您传递的是
数组而不是
formarray

[_input]="spectra.controls"
试着换成

[\u输入]=“光谱”

子模板应如下所示:

*ngFor="let item of _input.controls
                         ^^^^^^^^^^
                       add this