时间戳

首页 > 解决方案 > 隐藏div时如何保护行高

css - 隐藏div时如何保护行高

问题描述

我有一个多于一排的角度 2 组件。当任何信息发生变化时，我正在查询服务器。在查询过程中，我想隐藏这个组件并放置一个进度条，但进度条只有一行。我希望放置进度条时组件的高度不会改变。

<!--when this div hide-->
<div class="form-group row" *ngIf="!condition">
  <div class="col-sm-12">
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 1
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 2
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 3
        </div>
    </div>
  </div>
</div>
<!--this div show-->
<div class="form-group row" *ngIf="condition">
    Progress bar
</div>

标签： cssangular

解决方案

这是正在工作的stackblitz repo。

ngStyle您可以通过使用指令来实现这一点，

组件.ts 

public condition: boolean = true;

组件.html

<!--when this div hide-->
<div class="form-group row" [ngStyle]="{'visibility': condition ? 'hidden' : 'visible' }">
  <div class="col-sm-12">
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 1
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 2
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 3
        </div>
    </div>
  </div>
</div>
<!--this div show-->
<div class="form-group row" *ngIf="condition">
    Progress bar
</div>

推荐阅读