Question

我有一个角度为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>

Answer 1

这里在工作stackblitz repo.

您可以使用ngStyle指令来实现此目标，

component.ts

public condition: boolean = true;

component.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>

Answer 2

*ngIf="!condition"不会隐藏元素，而是将其完全从DOM中删除。您想改为应用visibility: hidden显示属性。

<div [class.hidden]="condition">...

CSS：

.hidden {
   visibility: hidden;
}

另一种解决方案是将其放入具有定义高度的外部容器中（也就是说，如果您可以静态定义其重量，则：内部容器的大小或多或少是恒定的）：

<div class="spacer">
   <div *ngIf="!condition">Your inner div goes here
   </div>
</div>

CSS：

.spacer {
   height: 3rem;
}

隐藏div时如何保护行高

2 个答案: