Angular中的FormArray在模板中无法更新
可能存在一些问题，让FormArray在模板中无法更新。 解决这个问题主要有两种方法：
1.手动触发更新变化检测。
在代码中修改了FormArray中的值后，应该使用ChangeDetectorRef手动触发更新变化检测。代码示例如下：
import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
template: ,
})
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}
ngOnInit() { this.form = this.fb.group({ items: this.fb.array([ this.fb.group({ name: '' }), this.fb.group({ name: '' }), this.fb.group({ name: '' }), ]), }); }
onSubmit() { this.form.controls.items.setValue([ { name: 'item 1 updated' }, { name: 'item 2 updated' }, { name: 'item 3 updated' }, ]); this.cdr.detectChanges(); } }
2.使用FormBuilder的setControl方法。
使用FormBuilder的setControl方法可以动态添加或移除一个控件，同时更新FormArray的值。代码示例如下：
import { Component, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
@Component({ selector: 'my-app', template: `