Question

我有诸如框之类的可重复元素，每个元素的高度都不同，其中的内容（表格等）我需要根据当前渲染的框来更新angular-vs-repeat虚拟化视口的高度。我该怎么做？

     <div vs-repeat="{'scrollParent': 'window'}" size="10" offset-before="1000" ng-style="{
        'height': 'calc(100%)',
        'overflow': 'auto',
        'overflow-anchor': 'none'
      }">
      <div class="ibox" ng-repeat="person in timeSheetListCtrl.groupedItems" ng-if="!timeSheetListCtrl.too_many_records">
          <h5>
            {{person.person_name}}
          </h5>
        <div class="ibox-content">
          <div class="timesheet-table table-responsive m-t">
            <table class="table th-small table-bordered table-striped table-hover table-condensed m-b-none">
            <!-- table rendering here -->
 </table>
          </div>
          <div class="row">
            <div ng-if="::timeSheetListCtrl.woTime[person.person_name]" class="col-md-12 col-lg-4">
              <table class="table table-bordered table-striped table-condensed">
              </table>
            </div>
            <div ng-if="::timeSheetListCtrl.groupTotals[person.person_name]" class="col-md-12 col-lg-2">
              <table class="table table-bordered table-striped table-condensed">
              </table>
            </div>
            <div ng-if="::timeSheetListCtrl.payrollSummary[person.person_name]" class="col-md-12 col-lg-2">
              <table class="table table-bordered table-striped table-condensed">
                          <!-- table rendering here -->
</table>
            </div>
            <div ng-if="::timeSheetListCtrl.extraSummary[person.person_name]" class="col-md-12 col-lg-2">
              <table class="table table-bordered table-striped table-condensed">
                          <!-- table rendering here -->
    </table>
            </div>
            <div ng-if="::timeSheetListCtrl.subTotalTime[person.person_name]" class="col-md-12 col-lg-2">
              <table class="table table-bordered table-striped table-condensed">
                <!-- table rendering here -->
              </table>
            </div>
          </div>
        </div>
      </div>

Answer 1

您可以做到

<div *ngFor="let item of items;">
  <div [style.height.px]="{{item.height}}"></div>
</div>

或

<div *ngFor="let item of items;">
  <div [style.height]="'{{item.height}}px'"></div>
</div>

基于元素DOM高度的angular-vs-repeat动态元素高度

1 个答案: