Question

我需要为Charts JS创建数据数组（作为Angular模块）。它只是一个像[1,2,3]这样的线性数组。

此阵列的源数据是反应形式的一部分。在Json形式中它看起来像这样：

{
    "name": "test",
    "elements": [{
        "id": "1",
        "count": "10"
    },
    {
        "id": "2",
        "count": "20"
    },
    {
        "id": "3",
        "count": "30"
    }]
}

我希望得到一个包含count元素的数组：[10, 20, 30]但它们应该与被动表单字段“绑定”，因此图表js数组应始终包含最新元素，如果可能的话。我可以尝试使用双向数据绑定，但我听说混合反应形式和[(ngModel)]

是一个坏主意

所以问题是：如何将反应形式的'count'字段映射到线性数组元素并使它们保持最新？

谢谢！

Answer 1

首先使用valueChanges字段获取一个计数数组的可观察值，并在编辑表单时进行更新：

const counts$ = this.formGroup.valueChanges.map(data => {
  return data.elements.map(e => e.count);
});

然后以某种方式将该observable绑定到您的图表库。这是使用subscribe的例子（记得取消订阅）：

counts$.subscribe(counts => {
  updateChartJs(counts);
});

如何将反应形式字段映射到线性数组？

1 个答案: