2

我正在使用 Angular Reactive Forms 遍历一个值数组，我希望在 Form Array 之后有一个总字段，用于更新 Form Array 控件值的更改。

样本数据：

  primaryData = {
    products: [
      {
        name: 'test-product',
        unmoved: 21,
        moved: 18 
      },
      {
        name: 'another-product',
        unmoved: 18,
        moved: 42
      }
    ]
  }

我正在创建反应式表单控件和数组，如下所示：

  setPrimaryQuantities() {
    const control = <FormArray>this.primaryForm.controls.quantities;
    this.primaryData.products.forEach(product =>
      control.push(this.fb.group({
        name: [product.name, Validators.required],
        unmoved: [product.unmoved, Validators.required],
        moved: [product.moved, Validators.required]
      }))
    )
  }

  ngOnInit() {
    this.primaryForm = this.fb.group({
      quantities: this.fb.array([]),
      unmovedTotal: '',
      movedTotal: ''
    })
    this.setPrimaryQuantities();
  }

根据数组控件中的更改更新我的控件unmovedTotal和控件的最佳方法是什么。movedTotal这是一个StackBlitz展示我的结构。

4

1 回答 1

3

在我看来，您要查找的总数不应该是这种形式。它在您的 Typescript 中没有任何条件地被禁用，我想不出您可以直接编辑总数的用例。它只是表格之外的计算值。

也就是说，有一个可观察的类型是一件好事：

total$: Observable<{ moved: number, unmoved: number }>

要做到这一点，因为您使用了反应形式，所以它非常简单:)

this.total$ = this.primaryForm.valueChanges.pipe(
  startWith(this.primaryForm.value),
  map(f => f.quantities.reduce(
    (acc, q) =>
    ({
      moved: acc.moved + q.moved,
      unmoved: acc.unmoved + q.unmoved
    }),
    { moved: 0, unmoved: 0 }
  ))
);

每次表单更改时，您都希望获得新的总计。当您想从初始值（表单值）中生成新值（总计）时，请使用map运算符。

在表单上，​​我们想要循环数量并为moved和unmoved属性生成总和。所以在这里我们不能使用map（基本的 JS 映射，而不是来自 RXJS 的映射），因为它会产生一个数组。为此，我们可以使用reduce（再次来自纯 JS，这里没有 RXJS）。

现在我们已经有了 observable，我们只需要在视图中使用它。为了避免两次订阅，我们可以使用ngIfwithas语法：

<tr *ngIf="total$ | async as total">
  <td>Totals</td>
  <td>{{ total.unmoved }}</td>
  <td>{{ total.moved }}</td>
</tr>

这是基于您最初的 Stackblitz 示例的完整示例：

https://stackblitz.com/edit/angular-kbk3zm?file=src%2Fapp%2Fapp.component.ts

于 2018-05-21T18:41:54.050 回答