如何在mat-table顶部插入新行

Question

我有一个 mat-table，它显示了一列工作。现在，当我创建一个新的工作时，我想要将其显示在第一行而不是最后一行。如果我创建并添加一个新的工作，它会出现在 mat-table 的底部。我该如何实现这个功能？

我希望得到类似于 Stackblitz 的效果，但是我想要将行添加到第一行，而不是底部。

- Cpt Kitkat

---

在你的数组上使用.unshift(element)。 - CruelEngine

请您能否详细解释一下，因为我对Angular还比较陌生。 - Cpt Kitkat

请检查我的答案 - CruelEngine

Answer 1

如果您想要在 MaterialTable 的顶部添加新行，则可以添加以下选项：

<MaterialTable
    ...
   options={
     addRowPosition: 'first'
   }
    ...    
>

你只能选择first或last。默认设置为last。

- Philipp Panik

Answer 2

要将元素推到第一行，在数组中有一个叫做unshift()的方法。

例如：

var a = [1,2,3,4]; 如果我想将0推到a的第一个位置，我只需使用a.unshift(0)。

你所需要做的就是用.unshift()代替.push()。

我已经fork了stackblitz以帮助你解决问题https://stackblitz.com/edit/angular-axjzov-8zmcnp

- CruelEngine

---

嗨@CruelEngine，使用.unshift()我能够在表格顶部插入新行，但是在刷新页面后，插入的行会移动到页面底部...我该如何使行保持在顶部？ - Cpt Kitkat

@saad，你是怎么获取数据的？如果数据以发送的方式填充，则必须更改API响应中的内容。 - CruelEngine

从 API 中获取数据，然后在表格上显示。 - Cpt Kitkat

@saad，请在您的 API 响应中进行更改，将数据发送到您的要求。 - CruelEngine

Answer 3

如果您在组件中声明了数据源，如下所示：

dataSource = new MatTableDataSource<any>();

您可以使用以下方法在表格顶部添加一行：

this.dataSource.data.unshift(newRowObject);

- De Wet van As