在FormGroup中更新FormArray时更改检测不起作用

使用反应形式并在推送时更改检测 .

我一直在寻找如何做这个例子我觉得这很常见，但是，我似乎无法找到一个如何正确地做到这一点的好例子 .

当尝试更新包含ngOnInit内部订阅内部FormGroup列表的FormArray时，FormArray对象会更新，但除非在组件上强制进行更改检测，否则视图不会更新FormArray组 . 以这种方式更新的所有其他控件都在工作 . 所以感觉好像我正在尝试更新FormArray是错误的，我不应该也不想强制更改检测 .

import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core";
import { JournalTransactionService } from "app/accounting/shared-services/journal-transaction.service";
import { JournalEntry } from "accountingModels";
import { FormBuilder, FormGroup, FormArray } from "@angular/forms";
import { EntryLine } from "app/accounting/models/journal";

@Component({
  selector: "general-journal",
  templateUrl: "./general-journal.component.html",
  styleUrls: ["./general-journal.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GeneralJournalComponent implements OnInit {
  journalEntry: JournalEntry;
  journalEntryForm: FormGroup;

  constructor(private _journalTransactionService: JournalTransactionService, private _formBuilder: FormBuilder) { }

  get entryLines(): FormArray {
    return <FormArray>this.journalEntryForm.get("entryLines");
  };

  ngOnInit() {
    this.journalEntryForm = this._formBuilder.group(
      {
        transactionId: "",
        transactionDate: "",
        autoReversalDate: "",
        journalEntryType: "",
        entryLines: this._formBuilder.array([])
      }
    );
    this._journalTransactionService.getTransaction("", 80).subscribe(journalEntry => {
      journalEntry.entryLines.forEach(entryLine => {
        this.entryLines.push(this.entryLineMapper(entryLine));
      });

      this.journalEntryForm.patchValue(
        {
          transactionId: journalEntry.transactionId,
          transactionDate: journalEntry.transactionDate,
          autoReversalDate: journalEntry.autoReversalDate,
          journalEntryType: journalEntry.journalEntryType
        }
      );
    });
  }


  private entryLineMapper = (entryLine: EntryLine): FormGroup => {
    return this._formBuilder.group({
      accountId: entryLine.accountId,
      controlId: entryLine.controlId,
      debit: entryLine.debit,
      credit: entryLine.credit,
      description: entryLine.description,
    })
  }
}

html的相关部分 . 如果键入任何其他绑定字段（如事务ID），则运行更改检测并填写表 . 如果在订阅块中的补丁值之后手动触发更改检测，则表格将被填写 .

<tbody formArrayName="entryLines">
      <tr *ngFor="let entryLine of entryLines.controls; index as i" [formGroupName]="i">
        <td>
          <input type="text" class="form-control" formControlName="accountId">
        </td>
        <td>
          <input type="text" class="form-control" formControlName="controlId">
        </td>
        <td>
          <input type="text" class="form-control" formControlName="debit">
        </td>
        <td>
          <input type="text" class="form-control" formControlName="credit">
        </td>
        <td>
          <input type="text" class="form-control" formControlName="description">
        </td>
      </tr>
    </tbody>

Update

为了解决这个问题，我现在要创建两个组件，一个是功能的基本组件，另一个是包装表单 . 这允许我传递用于构建表单的数据作为表单组件的输入，从而允许OnPush检测工作 . 我对此有点不错，但仍然感觉FormArray应该能够通过订阅添加FormGroups或控件，并在UI中更新新值 . 我认为如果FormArray控件是AbstracControl的可观察对象，这将起作用 . 如果有人有更好的解决方案让我们都知道 .