Зарезервируйте место для DIV, даже если условие ложно

Question

У меня есть тег div:

<div class="ui-g-2 text-right visible" 
     *ngIf = "this.isUserAdmin && show"> &nbsp; Author Name: 
</div>
                    
<div class="ui-g-3 text-left visible" *ngIf = "this.isUserAdmin && show">&nbsp;
       <input class="pInputFilter" type="text" readonly id="authorname" value={{this.userSelectedAuthor}}>  
</div>

В зависимости от условий в ng Если мне нужно отобразить Div. Я вижу, что если условие не выполняется, следующий DIV в строке занимает позицию этого DIV.

У меня это в css:

div.visible {
    visibility: hidden
}

Может ли кто-нибудь сказать мне, что является правильным способ сделать то же самое?

Answer 1

Вы можете использовать visibility css, как показано ниже,

 <div class="ui-g-2 text-right visible" 
      [style.visibility]="this.isUserAdmin && show? hidden : visible ">  // check this line
          &nbsp; Author Name: 
 </div>
                    

 <div class="ui-g-3 text-left visible" 
       [style.visibility]="this.isUserAdmin && show? hidden : visible "> //check this line as well
          &nbsp;        
       <input class="pInputFilter" type="text" readonly id="authorname" value={{this.userSelectedAuthor}}>  
 </div>

Answer 2

Вы можете удалить *ngIf и вместо этого привязать класс visible на основе условия:

[class.visible]="!this.isUserAdmin || !show"