角材料虚拟重复

Question

我目前正在尝试创建时间表查看器，并利用Angular Material（JS）给我们的md-virtual-repeat指令

我发现我不能在虚拟重复中使用表，所以我暂时只使用了div。我们当前遇到的一个问题是尝试渲染a）在同一页面上的两个虚拟重复b）试图找出一种在虚拟重复本身内创建两个单独元素（侧边栏，滚动体）的方法，因为我们希望侧边栏坚持并允许表格的其余部分滚动。这应该很容易实现，固定侧边栏并计算表主体的适当边距，但虚拟重复似乎不喜欢这种方式。下面是标记：

<div class="timetable-container-outer">
    <div id="timetableContainer" class="timetable-container">
      <md-virtual-repeat-container id="vertical-container">
        <div md-virtual-repeat="item in vm.virtualItems" md-on-demand class="repeated-item" flex="">
          <div class="timetable-detail-stop" layout="row" flex layout-align="start center">
            <img src="assets/images/markers/stage-1-or-selected.png" />
            <div>{{ item.stopName }}</div>
          </div>
          <div class="timetable-detail-time" ng-repeat="departure in item.stopTimes track by $index" ng-class="{'block': departure.groupText !== undefined}">
            {{ departure.groupText !== undefined ? departure.groupText : departure.time }}
          </div>
        </div>
      </md-virtual-repeat-container>
    </div>
  </div>

我正在考虑做的一件事是对timetable-detail-stop元素应用位置定位，但是这样做会导致页面空白，但是在所有元素都呈现完美之后才能进行。我不想添加ng样式，因为这将在页面上创建更多绑定，从而使虚拟重复工作无用。在尝试渲染虚拟重复中的其他元素之前，是否有人遇到过问题？如果是，您如何做到这一点？