Что эквивалентно ngShow и ngHide в Angular 2+?

Ответ 1

Просто привяжите свойство hidden

[hidden]="!myVar"

См. также

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

проблемы

hidden имеет некоторые проблемы, хотя это может привести к конфликту с CSS для свойства display.

Посмотрите, как some в Пример плунжера не скрывается, потому что он имеет стиль

:host {display: block;}

множество. (Это может вести себя по-другому в других браузерах - я тестировал с Chrome 50)

обходной путь

Вы можете исправить это, добавив

[hidden] { display: none !important;}

В глобальном стиле в index.html.

другая ошибка

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

совпадают с

hidden="true"

и не покажет элемент.

hidden="false" присвоит строку "false", которая считается правдой.
Только значение false или удаление атрибута фактически сделает элемент видимый.

Использование {{}} также преобразует выражение в строку и не будет работать должным образом.

Только привязка к [] будет работать как ожидалось, потому что этот false назначается как false вместо "false".

*ngIf vs [hidden]

*ngIf эффективно удаляет его содержимое из DOM, а [hidden] изменяет свойство display и только указывает браузеру не показывать содержимое, но DOM все еще содержит его.

Ответ 2

Используйте атрибут [hidden]:

[hidden]="!myVar"

Или вы можете использовать *ngIf

*ngIf="myVar"

Это два способа показать/скрыть элемент. Единственное отличие: *ngIf удалит элемент из DOM, в то время как [hidden] скажет браузеру показать/скрыть элемент, используя свойство display CSS, сохранив элемент в DOM.

Ответ 3

Я нахожусь в той же ситуации с разницей, чем в моем случае элемент был контейнером flex. Если это не ваш случай, легкая работа вокруг может быть

[style.display]="!isLoading ? 'block' : 'none'"

в моем случае из-за того, что многие браузеры, которые мы поддерживаем, все еще нуждаются в префиксе поставщика, чтобы избежать проблем, я пошел на еще одно простое решение

[class.is-loading]="isLoading"

где тогда CSS прост как

&.is-loading { display: none } 

чтобы оставить отображаемое состояние обработанным классом по умолчанию.

Ответ 4

Извините, я не согласен с привязкой к скрытому, который считается небезопасным при использовании Angular 2. Это связано с тем, что скрытый стиль можно легко перезаписать, например, используя

display: flex;

Рекомендуемый подход - использовать * ngIf, что безопаснее. Для получения дополнительной информации обратитесь к официальному блогу Angular. 5 ошибок Rookie, которых следует избегать Angular 2

<div *ngIf="showGreeting">
   Hello, there!
</div>

Ответ 5

Согласно Angular 1 документации ngShow и ngHide, обе эти директивы добавляют стиль css display: none !important; к элементу в соответствии с условием этой директивы (для ngShow добавляет css на ложное значение, а для ngHide добавляет css для истинного значения).

Мы можем добиться такого поведения, используя директиву Angular 2 ngClass:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

Обратите внимание, что для show поведения в Angular2 нам нужно добавить ! (not) перед ngShowVal, а для hide поведения в Angular2 нам не нужно добавить ! (not) перед ngHideVal.

Ответ 6

Если ваше дело в том, что стиль не отображается, вы также можете использовать директиву ngStyle и изменять отображение напрямую, я сделал это для загрузочного диска DropDown, UL на нем установлен для отображения none.

Итак, я создал событие click для "вручную", чтобы переключить UL для отображения

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

Затем на компоненте у меня есть атрибут showDropDown: bool, который я каждый раз переключаю и на основе int устанавливаю displayDDL для стиля следующим образом

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

Ответ 7

Если вы используете Bootstrap, просто:

<div [class.hidden]="myBooleanValue"></div>

Ответ 8

Для всех, кто сталкивался с этой проблемой, я так и сделал.

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

Я использовал 'visibility' потому что хотел сохранить пространство, занимаемое элементом. Если вы не хотите этого делать, вы можете просто использовать 'display' и установить 'none';

Вы можете привязать его к вашему HTML-элементу, динамически или нет.

<span hide="true"></span>

или же

<span [hide]="anyBooleanExpression"></span>

Ответ 9

Используйте скрытый, как вы привязываете любую модель к элементу управления и укажите css для него:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS

[hidden] {
   display: none;
}

Ответ 10

в начальной загрузке 4.0 класс "d-none" = "display: none! важный;"

<div [ngClass]="{'d-none': exp}"> </div>

Ответ 11

<div [hidden]="myExpression">

myExpression может иметь значение true или false

Ответ 12

<div [hidden]="flagValue">
---content---
</div>

Ответ 13

Есть два примера на англоязычных документах https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Директива может скрыть нежелательный абзац, установив для его стиля отображения значение none.

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

Вы можете использовать [style.display] = "block" для замены ngShow и [style.display] = "none" "для замены ngHide.

Ответ 14

Чтобы скрыть и показать div при нажатии кнопки в углу 6.

HTML-код

<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

Компонент .ts Код

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
 isShow=false;
  }

это работает для меня, и это способ заменить ng-hide и ng-show в angular6.

наслаждаться...

Спасибо

Ответ 15

для меня [hidden]=!var никогда не работал.

Итак, <div *ngIf="expression" style="display:none;">

И, <div *ngIf="expression"> Всегда давать правильные результаты.