當表單模型中的值更新時，如何強制 Angular 2 更改檢測？

Question

好的，讓我開始描述我真正想要解決的問題。

我需要我的表單模型具有以下結構：

{
  nested: {
    first: 'one',
    second: 'two',
    third: 'three',
    forth: 'four', ...
  }, ...
}

子屬性將根據用戶輸入動態添加到模型中，嵌套級別的數量可能會有所不同。

實現看起來像這樣：

初始化表格：

ngOnInit() {
  this.form = this.fb.group({
    nested: this.getControls() // of type FormGroup
  });
}

負載控制：

getControls(): FormGroup {
  let group: FormGroup = new FormGroup({});
  Object.keys(this.controls).forEach((key) => {
    let control: FormControl = new FormControl(this.controls[key]);
    group.addControl(key, control);
  })
  return group
}

帶有 *ngFor 的模板：

<div *ngFor="let control of form.get('nested').controls | keys; let i = index">
  <label>{{ getLabel(i) }}</label>
  <input [attr.placeholder]="control.value">
</div>

使用添加新的控制方法：

addControl(key, value) {
  let control: FormControl = new FormControl(value)
  this.form.get('nested').addControl(key, control);
  this.cdf.detectChanges();
}

Plunkr 上可用的精簡實現

現在，我遇到的問題是模型的值更新了，但模板沒有使用添加的輸入重新渲染。

我試圖強制更改檢測觸發，但沒有奏效。

我知道使用FormArray提供了更多動態功能，但它會產生如下輸出：

{
  nested: [
    { first: 'one' },
    { second: 'two' },
    { third: 'three' },
    { forth: 'four' }, ...
  ], ...
}

這讓我們回到了問題的根源。

當然，在將模型推送到數據庫之前，我可以利用一個函數將模型轉換回所需的格式，但鑒於模型在樹的不同級別可能有幾個不同的屬性，而對於某些我可能會顯示作為數組，有些可能不會，事情很容易變得過於復雜。

這給我留下了FormGroup ，但是我如何確保模板在應用新輸入時呈現？ 謝謝！

Answer 1

我可以為您提供以下解決方案：

1) 使用不純的管道

@Pipe({
  name: 'keys',
  pure: false
})

Plunker 示例

2) 添加控件后傳遞新的引用

addControl(key, value) {
  this.controls[key] = value;
  this.form = this.fb.group({
    nested: this.getControls()
  });
}

Plunker 示例

---

我還刪除了getLabel函數並將映射控件名稱添加到您的管道

keyArr.forEach((key) => {
   value[key].name = key;
   dataArr.push(value[key])
})

也可以看看

• 解開 Angular 2 一書，第 1 章，示例 5

• NgFor 不使用 Angular2 中的管道更新數據