如何刷新在 material table 中用作数据源的 angular formArray

Question

当我们进行新的 api 调用时如何刷新 material table 中的 formArray（已过滤数据）。如果我单击 Filter data 按钮，它应该刷新并从 api 加载新数据。目前它不刷新 material table 并将新数据添加到表单数组中。我该如何解决这个问题？

代码如下：Demo

table的当前行为

Answer 1

通过调用 formArray 的 clear 方法删除现有的 formArray。然后创建一个新的 FormArray 然后用新的控件更新数据源。

   onsubmit() {
     this.productArray.clear();
     this.formBuilder(this.sample2);
     this.tableDetails.data = this.productArray.controls;
   }

Answer 2

您必须重新分配新数据。

  onsubmit() {
    this.formBuilder(this.sample2);
    this.tableDetails.data = [...this.productArray.controls];
  }

我认为您应该重构代码并使用 mat-table 文档中的示例。当您进行 api 调用时，我不确定它是否适用于 Observable。

How to refresh the angular formArray that using as datasource in material table