如何在固定第一列的角度2+中创建基于div的表？

Question

我正在研究一种解决方案

我想创建固定第一列的基于div的表

我实际上已经解决了一部分问题

但是在我的解决方案中实际上发生了什么，只有第一行滚动可能是由于ngfor引起的，起初我以为这些元素是在迭代循环时创建的，因此事件侦听器可能无法将div绑定到滚动。

无论何时迭代for循环的最后一个元素，我都试图调用函数，但仍然无法实现

这是我的代码

HTML：

<div class="myTable">
  <div class="myTr ">
    <div class="myTd" style="padding: 15px 0px !important;
    background: #f4f3f8 !important;
    font-size: 14px !important;
    border: none !important;
    color: #575962 !important;
    font-weight: 500;">Line A</div>
    <div class="myTdGroupBox">
    <div class="myTdGroup" style="padding: 15px 10px !important;
    background: #f4f3f8 !important;
    font-size: 14px !important;
    border: none !important;
    color: #575962 !important;
    font-weight: 500;">
      <div class="myTd">A1</div>
      <div class="myTd">A222</div>
      <div class="myTd">A333</div>
      <div class="myTd">A444</div>
      <div class="myTd">A555</div>
      <div class="myTd">A666</div>
    </div>
  </div>
  </div>
  <ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
  <div class="myTr  report-row">
    <div class="myTd">Line BBBBB</div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd">B111</div>
      <div class="myTd">B2</div>
      <div class="myTd">B333</div>
      <div class="myTd">BX<br>444</div>
      <div class="myTd">B555</div>
      <div class="myTd">B666</div>
    </div>

    </div>
  </div>
  {{isLast ? updateControls(i) : ''}}
 </ng-container>
  <div class="myTr" style="margin-top:20px;">
    <div class="myTd"></div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd"></div>
    </div></div>
  </div>
</div>

JS

getReport() {
        this.hidePopup();
        if(this.splitOpt.length === 0) {
            // this.updateGraph(this.currentGraphSelection);
            return false;
        } 


        var apiFilters: any = [{}];
        for (var i = 0; i < this.sFilters.length; i++) {
            if (this.sFilters[i].values.length > 0) {
                var k;
                k = this.sFilters[i].id
                apiFilters[0][k] = this.sFilters[i].values
            }
        }

        var split = this.splitOpt[0].id;
        this.reportData=[];
        this.reportLoading = true;
        this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
            if (response.status == 1200) {
                this.reportData = response.data.split_by_data;
                this.reportData.map(function(obj) {
                  obj.isCollapsed = true;
                  return obj;
               });
            this.totalImpressions=response.data.totalCount[0].impressions;
            this.totalConversions=response.data.totalCount[0].conversions;
            this.totalBids=response.data.totalCount[0].bids;
            this.totalWins=response.data.totalCount[0].wins;
            this.totalSpend=response.data.totalCount[0].spend;
               this.reportLoading = false;
               //this.cd.detectChanges();
            }
        });
    }

向div添加事件侦听器的功能

updateControls(i) {
        if (this.shouldDoIt) {
            var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
            var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
            ctrlGroup.addEventListener('scroll', (ev)=> {
                contentGroups.forEach(function (g) {
                  g.scrollTo(ctrlGroup.scrollLeft, 0);
                }); 
            });
            this.shouldDoIt = false; 
        }
    }

CSS：

.myTable {
    font-family: sans-serif;
    font-size: 15px;
    width: 1300px;
    position: relative;
  }
  .myTr {
    display: flex;
    align-items: center;
  }

  .myTdGroupBox {
    overflow: hidden;
  }
  .myTdGroup {
    display: flex;
    align-items: center;
    min-width: 1000px;
  }
  .myTr:last-child { background: transparent }
  .myTr:last-child .myTdGroupBox { overflow-x: scroll }
  .myTr:last-child .myTd { padding: .1px 0 0 0 }
  .myTd {

    flex-grow: 0.2;
    flex-basis: 100px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .myTr > .myTd { flex-basis: 500px; }


  /* width */
::-webkit-scrollbar {
  width: 20px;
  height:12px;

}

/* Track */
::-webkit-scrollbar-track {
  background:#eaeaea;
  }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc; 

}

.report-row-header div {
  padding: 15px 10px !important;
    background: #f4f3f8 !important;
    font-size: 14px !important;
    border: none !important;
    color: #575962 !important;
    font-weight: 500;
}

.report-row {
  padding:7px 0px;
}


.report-row:nth-child(even) {
  background:#fff;
}
.report-row:nth-child(odd) {
  background:rgb(245, 245, 245);
}

看看我现在面临的问题！我使用chrome ext创建了视频。 https://drive.google.com/file/d/1LfUE5rj0OwUBzLgzKGgfZdvGEEnEo8Dk/view