Question

我正在使用有角材质在页面上以分页显示数据，当用户单击行时，我将他重定向到另一页，并且如果他想返回到表页，则单击按钮。

我的问题是用户需要返回表格页面并滚动到特定行，我这样做是

document.getElementById(elementId).scrollIntoView()

但是如果单击的行不在第一页中，则找不到该元素，我如何分页到该行所在的页面？

第二个问题是用户可以过滤表然后选择特定的行，如果我保存页码，当他返回表页时，数据将被呈现而没有过滤器并且页码将不正确< / p>

Answer 1

当您转到另一页时，您必须保存有关myHandler1.post(new Runnable() { //call handler @Override public void run() { myLoadingText1.setVisibility(View.VISIBLE); // sets loading complete to visible after time elapsed visible = 1; startActivity(new Intent(this, login_register.class)); } });的信息，因为返回数据表时，您必须将此索引号赋予pageIndex。例如：

[pageIndex]

这里<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event" [pageIndex]="pIndex"> </mat-paginator>是我在组件中定义的变量。如果您的pIndex是10，而pageSize是0，则显示1到10行...

有关更多信息：https://stackblitz.com/angular/ngdejmepgbr?file=app%2Fpaginator-configurable-example.html

Answer 2

您需要将分页器与Angular的路由器连接。

例如，假设您的路线路径如下：

class Inherited(metaclass=SomeFancyMetaclass):
    ...

class MagicAttrsMeta(Inherited.__class__):
    def __getattr__(self, attr):
          if attr in ("flying", "circus", "brian", "king_arthur"):
               return "coconut"
          raise AttributeError()


generated_class = MagicAttrsMeta("GeneratedClass", (Inherited,), {})

在这种情况下，您可以从URL到表中获取页面索引2，如下所示：

组件类：

http://my/url/to/table/component?page=2

模板：

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  );

  constructor(activatedRoute: ActivatedRoute) {}
}

到目前为止，URL将驱动该表。现在，当用户使用分页器浏览表格时，您还需要更新URL：

模板：

<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>

组件类：

<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>

现在，当用户在表中浏览时，URL正在更新，这使路由器可以在用户返回到以前访问的URL时驱动表。

如何使用Angular Material表滚动到特定页面中的特定行

2 个答案: