Angular 角度2+;removeAt函数在子组件中不起作用
我在angular4中使用模型驱动 我通过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> </
@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