mat-table 中 FormArray 的表单组件排序不正确 更新

如何解决mat-table 中 FormArray 的表单组件排序不正确 更新

我有一个 mat-table，每行都有一个表单控件组件，如下图所示：

以及如下所示的数据模型：

export class ProductClass {
  constructor(
    public id: string,public name: string,public date: Date,public weight: number,public input1: string,public input2: string
  ) {}
}

每行数据包含Product ID、Product Name和Product Date作为标题，以及额外的子数据Weight、Input1和{{ 1}}.

我用下面的示例数据填充表格：

Input 2

我使用sample: ProductClass[] = [ new ProductClass('PID1','Product x',new Date(),1,'a','1'),new ProductClass('PID2','Product g',2,'b','2'),new ProductClass('PID3','Product s',3,'c','3'),new ProductClass('PID4','Product j',4,'4'),new ProductClass('PID5','Product r',5,'5'),new ProductClass('PID6','Product w',6,'6'),new ProductClass('PID7','Product k',7,'7'),]; 来启用表格排序，但我意识到在执行排序时，所有带有静态文本的数据都会相应地排序，除了mat-sort-header和{{1}的表单控件组件}}。例如，根据上面的示例数据，我的 input1 值为 input2，因此如果我以 input1 降序对表进行排序，则 "a,b,c,a,a" 值假设为按 Product ID 的顺序排列，但不是。排序后，input1 的值按照 "a,a" 的顺序排列，这是没有意义的。但是，如果我将 input1 的值作为静态文本（如 "a,a"），它会显示正确的值

模板

input1

组件

{{child.value.input1}}

我尝试在 Stackbitz 上复制我的代码，虽然 CSS 不起作用，但它确实复制了我上面描述的问题。

更新

我注意到问题仅在数据填充到多页分页中时才存在。比如我的分页大小是每页5行，如果数据超过5行，就会有问题。如果我将分页大小更改为大于填充数据，以便所有行都将呈现在一页中，则不会出现问题。任何帮助将不胜感激！

解决方法

原来是FormGroupName的问题，你不能用FormGroupName设置你的dataIndex，因为当你用mat-sort-header对表格进行排序时，它只会排序UI层上的表格，没有改变数据集的实际顺序（tableDetails.data的顺序）

因此，我将其改为 [formGroupName]="getActualIndex(rowindex)"，而不是 [formGroupName]="tableDetails.data.indexOf(child)"。