标签: teradata-covalent

我想经常使用从JSON REST API中提取的新数据更新我的数据表(Covalent td-data-tablewith several ng-template).比浏览器更多的行,因此用户可能需要垂直滚动.但是当我更新表格中的数据时,它会完全重绘,即垂直滚动位置重置到顶部,工具提示闪烁等等.

黑客可以保存/恢复垂直滚动,例如下面的工作,但是它们会造成很多视觉混乱,特别是在Firefox中.

// save vertical scroll
this.scrollTop = this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop;

// update table data here
this.data = newData;

// restore vertical scroll
setImmediate(() => {
    this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop = this.scrollTop;
  }
});

如何干净地更新表格(或任何组件)中的数据,而不是黑客重置滚动位置并忍受大量闪烁行为？

如果没有使用Covalent数据表的解决方案,是否有另一个Angular 2+控件可以正确处理？

问题的动画捕获:数据更新时垂直滚动快照.应跨数据更新维护垂直滚动.

我为我的angular 4应用程序设置了一个简单的路由,包括使用Tetradata Covalent和Angular Material创建的sidemenu我正在使用这个Angular 2/4身份验证教程来处理登录,但所有子路由器链接都重定向到默认页面(仪表板).任何帮助或建议将受到高度赞赏.

app.routing.ts

export const APP_ROUTES: Routes = [
  {path: 'login', component: HomeComponent},
  { path: '', redirectTo: 'mainpage', pathMatch: 'full' },
  { path: '**', redirectTo: 'mainpage' },
  {
    path: 'mainpage',
    component: MainPageComponent,
    canActivate:[AuthGuard],
    children: [
      {path: 'order', component: OrderComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'stock', component: StockComponent},
      {path: 'Report/sales', component: SalesComponent},
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
      {path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
    ]
  }
];

page.component.html

<td-layout>
  <td-navigation-drawer flex sidenavTitle="EzyAgric" …