Question

这是我当前的html：

<div #autoscroll
     class="row wholeTable">
  <div class="col">
    <div class="row no-wrap">
      <ng-container *ngFor="let stage of cardList; let i = index">
        <div class="col">
          <ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou">
            <ng-container
                          *ngTemplateOutlet="pipelineConfig.headerTemplate; context: {$implicit: headerList[i], count: cardList[i].items.length}">
            </ng-container>
          </ng-container>
          <ng-template #noHeaderForYou>
            <!-- Displaying some useful info even if no custom template is present-->
            <dt-pipeline-header [label]="headerList[i].elementLabel"
                                       [count]="cardList[i].items.length">
            </dt-pipeline-header>
          </ng-template>
        </div>
      </ng-container>
    </div>
    <div class="row stage no-wrap">
      <ng-container *ngFor="let stage of cardList">
        <div class="col stage-col"
             dragula="cardList"
             [(dragulaModel)]="stage.items"
             attr.id="{{stage.key}}">
          <ng-container *ngFor="let item of stage.items">
            <div class="card"
                 [ngClass]="{
              'dragabble': pipelineConfig.permissionChecker(item),
              'nodrag': !pipelineConfig.permissionChecker(item)
            }">
              <div class="card-body">
                <ng-container *ngIf="!pipelineConfig.permissionChecker(item)">
                  <span class="disabled-indicator"><i class="fas fa-ban"></i></span>
                </ng-container>
                <ng-container
                              *ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}">
                </ng-container>
              </div>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </div>
  </div>
</div>

我在这里知道这个问题，因为我想添加一行no-wrap粘性属性，但是由于父母中有另一个孩子，所以直到我到达那个孩子之前，它都是粘性的。另外，由于标题和舞台容器是分开的，如果您在没有卡的地方有一个空列，那么它就没有宽度，只有填充物会弄乱布局。

如果我这样做：

<div #autoscroll
     class="row wholeTable">
  <ng-container *ngFor="let stage of cardList; let i = index">
    <div class="col">
      <ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou">
        <ng-container
                      *ngTemplateOutlet="pipelineConfig.headerTemplate; context : {$implicit: headerList[i], count: cardList[i].items.length}">
        </ng-container>
      </ng-container>
      <ng-template #noHeaderForYou>
        <!-- Displaying some useful info even if no custom template is present-->
        <dt-pipeline-header [label]="headerList[i].elementLabel"
                                   [count]="cardList[i].items.length">
        </dt-pipeline-header>
      </ng-template>
      <div class="row stage">
        <div class="col"
             dragula="cardList"
             [(dragulaModel)]="stage.items"
             attr.id="{{stage.key}}">
          <ng-container *ngFor="let item of stage.items">
            <div class="card"
                 [ngClass]="{
                  'dragabble' : pipelineConfig.permissionChecker(item),
                  'nodrag': !pipelineConfig.permissionChecker(item)
                }">
              <div class="card-body">
                <ng-container *ngIf="!pipelineConfig.permissionChecker(item)">
                  <span class="disabled-indicator"><i class="fas fa-ban"></i></span>
                </ng-container>
                <ng-container
                              *ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}">
                </ng-container>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</div>

不存在空列问题，但我必须面对整个父容器中有另一个孩子的问题，根据我的意愿，粘性不会起作用。

实现我想做的最简单的方法是什么？

实现立场：在不起作用时会发粘的行为？

0 个答案: