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

Question

У меня есть ряд элементов, которые я хочу видеть при определенных условиях.

В AngularJS я бы написал

<div ng-show="myVar">stuff</div>

Как я могу сделать это в Angular?

Answer 1

Просто привязать к 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 по-прежнему содержит его.

Answer 2

*ngIf="myVar"

ИЛИ ЖЕ

[hidden]="!myVar"

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

Answer 3

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

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

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

[class.is-loading]="isLoading"

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

&.is-loading { display: none } 

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

Answer 4

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

display: flex;

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

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

Answer 5

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

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

Answer 6

<div hidden="{{ myExpression }}">
<div [hidden]="myExpression">

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

Answer 7

Согласно документации 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 нам нужно добавить ! (не) до ngShowVal, и для hide поведение в Angular2 нам не нужно добавлять ! (не) до ngHideVal.

Answer 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>

Answer 9

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

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

Answer 10

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

Answer 11

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

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

Answer 12

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

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

Answer 13

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

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

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

Answer 14

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

Answer 15

с использованием [ngStyle]

      [ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

Answer 16

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

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

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

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

Answer 17

[hidden]="yourVariable" ИЛИ [style.display]="!isShow? 'block' : 'none'"

Answer 18

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

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

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

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

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

      [hidden]="!myVarible"

Answer 19

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

Если вы используете [hidden]="true" или стиль скрыть [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-шаблона

Answer 20

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

Answer 21

Этот ответ предназначен для тех, кто не знает, как скрыть элемент, видимый из файла .ts.

TS-файл

Answer 22

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

Директива может скрыть нежелательный абзац, установив для его стиля отображения значение 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.

Answer 23

Чтобы скрыть и показать 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 в angular 6.

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

Спасибо