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

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

[hidden]="!myVar"

Смотрите также

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

проблемы

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

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

: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 против [hidden]

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

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

[hidden]="!myVar"

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

*ngIf="myVar"

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

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

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

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

[class.is-loading]="isLoading"

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

&.is-loading { display: none } 

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

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

display: flex;

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

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

вот что сработало для меня:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

<div [hidden]="myExpression">

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

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

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>

or

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

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

Поэтому я создал событие щелчка для «ручного» переключения 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";
}

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

Согласно документации 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.

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

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

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

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

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

So, <div *ngIf="expression" style="display:none;">

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

Лучший способ справиться с этой проблемой с помощью ngIf Поскольку это хорошо препятствует получению этого элемента от рендеринга во внешнем интерфейсе,

Если вы используете [hidden]="true" или стиль hide [style.display], он будет скрывать только элемент в интерфейсе, и кто-то может легко изменить значение и увидеть его. На мой взгляд, лучший способ скрыть элемент - ngIf

<div *ngIf="myVar">stuff</div>

а также, если у вас есть несколько элементов (также необходимо реализовать еще), вы можете использовать опцию <ng-template>

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

образец кода ng-шаблона

Моя проблема заключалась в отображении / скрытии таблицы матов при нажатии кнопки с использованием ‹ng-container * ngIf = myVar›. «Загрузка» таблицы была очень медленной: 300 записей за 2-3 секунды.

Данные загружаются с использованием подписки в ngOnInit (), доступны и готовы к использованию в шаблоне, однако «загрузка» таблицы в шаблоне становится все медленнее с увеличением количества строк.

Мое решение заключалось в замене * ngIf на:

<div [style.display]="activeSelected ? 'block' : 'none'">

. Теперь таблица загружается мгновенно при нажатии кнопки.

Есть два примера в документах Angular 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.

Если вы просто хотите использовать симметричные директивы _1 _ / _ 2_, которые поставляются с AngularJS, я предлагаю написать директиву атрибутов для упрощения таких шаблонов (проверено с Angular 7):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

Многие другие решения верны. Вы должны использовать *ngIf везде, где это возможно. Использование атрибута hidden может иметь неожиданные стили, но если вы не пишете компоненты для других, вы, вероятно, знаете, есть ли это. Итак, чтобы эта директива shown работала, вы также должны убедиться, что вы добавили:

[hidden]: {
  display: none !important;
}

к вашим глобальным стилям где-нибудь.

С ними вы можете использовать такую ​​директиву:

<div [shown]="myVar">stuff</div>

с симметричной (и противоположной) версией так:

<div [hidden]="myVar">stuff</div>

Чтобы добавить к следует - вы также должны использовать такой префикс, как [acmeShown], а не просто [shown].

Основная причина, по которой я использовал директиву атрибутов shown, - это преобразование кода AngularJS в Angular -AND-, когда скрытый контент содержит компоненты контейнера, которые вызывают циклические обходы XHR. Причина, по которой я не использую просто [hidden]="!myVar", заключается в том, что достаточно часто это более сложно, например: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone. [показано] `просто легче думать.

У вас есть два варианта:

Первый вариант

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

Второй вариант

myVarible может быть логическим

[hidden]="!myVarible"

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

HTML-код

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

Код AppComponent.ts

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

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