Angular 2+ removeAt 函数在 child 组件中不起作用

Question

我在 angular4 中为我的表单使用模型驱动。

我通过 @input 将 formarray 传递给 child 组件，当我使用 removeAt 时，它发现了一个错误：

removeAt is not a function

我的parentcomponent.html

<form class="ui form" [formGroup]="gform" (ngSubmit)="doSave(gform.value)">
<app-tag-input [_input]="spectra.controls"  ></app-tag-input>
</form>

parentcoponent.ts

     gform: FormGroup;
       get spectra(): FormArray { return this.gform.get('spectra') as 
       FormArray; }
       ngOnInit() {
        this.spectra.insert(0, this.initSpectrum(' very good'));
            this.spectra.insert(1, this.initSpectrum('good'));
            this.spectra.insert(2, this.initSpectrum('normal'));
            this.spectra.insert(3, this.initSpectrum('need to more try'));}

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() {

  }

}

我的childcomponent.html

<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>

当我在拖曳组件中控制 formarray 时，object 存在于 parent 组件 spectra 中，但不存在于 child 组件的 _input 中。

Answer 1

那是因为你传递的是 Array 而不是 FormArray。

[_input]="spectra.controls"

尝试更改为

[_input]="spectra"

子模板应如下所示：

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

Example

Angular 2+ removeAt 函数在 child 组件中不起作用

Angular 2+ removeAt function not working in child component

forms

angular

angular4-forms

angular-forms