Apa yang setara dengan ngShow dan ngHide di Angular 2+?


570

Saya memiliki sejumlah elemen yang saya ingin terlihat dalam kondisi tertentu.

Di AngularJS saya akan menulis

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

Bagaimana saya bisa melakukan ini dalam Angular 2+?


[disembunyikan] = "! myVar" .. ini berfungsi dalam sudut 2+
Pragati Dugar

Jawaban:


951

Ikat saja ke hiddenproperti

[hidden]="!myVar"

Lihat juga

masalah

hiddenmemiliki beberapa masalah karena dapat bertentangan dengan CSS untuk displayproperti.

Lihat bagaimana somedalam contoh Plunker tidak disembunyikan karena memiliki gaya

:host {display: block;}

set. (Ini mungkin berperilaku berbeda di browser lain - saya diuji dengan Chrome 50)

solusi

Anda dapat memperbaikinya dengan menambahkan

[hidden] { display: none !important;}

Untuk gaya global di index.html.

perangkap lain

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

sama dengan

hidden="true"

dan tidak akan menampilkan elemen.

hidden="false"akan menetapkan string "false"yang dianggap benar.
Hanya nilai falseatau menghapus atribut yang benar-benar akan membuat elemen terlihat.

Menggunakan {{}}juga mengubah ekspresi menjadi string dan tidak akan berfungsi seperti yang diharapkan.

Hanya mengikat dengan []akan berfungsi seperti yang diharapkan karena ini falseditugaskan sebagai falseganti "false".

*ngIf vs. [hidden]

*ngIfsecara efektif menghapus kontennya dari DOM sambil [hidden]memodifikasi displayproperti dan hanya menginstruksikan browser untuk tidak menampilkan konten tetapi DOM masih mengandungnya.


21
Penggunaan tersembunyi sebenarnya tidak disarankan. angularjs.blogspot.com/2016/04/…
Sam

7
*ngIfmungkin cara yang benar dalam banyak kasus, tetapi kadang-kadang Anda benar-benar ingin elemen ada di sana, tersembunyi secara visual. Gaya CSS dengan [hidden]{display:none!important}bantuan. Sebagai contoh, bagaimana Bootstrap memastikan [hidden]elemen benar-benar disembunyikan. Lihat GitHub
CunningFatalist

Anda mungkin mengalami beberapa masalah ketika Anda menggunakan pipa (myStream | async) di dalam * ngIf yang juga menggunakan pipa (myStream | async)
Pavel Blagodov

1
kamu adalah penyelamatku! menggunakan * ngIf akan mengatur ulang posisi DOM ke atas tetapi [tersembunyi] menyelesaikan masalah saya dan mempertahankan posisi itu.
Santosh

1
Satu kasus di mana orang mungkin ingin menggunakan [tersembunyi] di atas * ngIf adalah ketika Anda menggunakan HostListener (dan ingin membedakan klik dokumen vs event.target), ketika mencoba menampilkan dan menyembunyikan elemen (seperti dengan drop down kustom)
akhouri

141

Gunakan [hidden]atribut:

[hidden]="!myVar"

Atau bisa Anda gunakan *ngIf

*ngIf="myVar"

Ini adalah dua cara untuk menampilkan / menyembunyikan elemen. Satu-satunya perbedaan adalah: *ngIfakan menghapus elemen dari DOM sementara [hidden]akan memberitahu browser untuk menampilkan / menyembunyikan elemen menggunakan displayproperti CSS dengan menjaga elemen dalam DOM.


3
[tersembunyi] menambahkan conditionnaly atribut "tersembunyi" ke elemen. Itu juga bisa [apa pun] atau [ali]. Yang penting di sini adalah memuat aturan CSS yang menyebutkan atribut "tersembunyi" harus ditampilkan: tidak ada
Gabriel

5
Ingatlah: * ngIf dan [disembunyikan] berbeda secara fundamental. ngIf tidak akan mengevaluasi konten di dalam blok * ngIf sampai kondisinya benar. Ini sangat penting jika Anda menggunakan asyncpipa, karena berlangganan ke diamati hanya akan ditambahkan setelah kondisi menjadi kenyataan!
Dynalon

2
Satu hal lagi yang perlu dipertimbangkan adalah bahwa * ngIf menghancurkan komponen dan harus dibuat ulang, sementara [tersembunyi] menyimpannya dalam memori. Jika Anda memiliki komponen padat sumber daya, mungkin lebih baik menyembunyikannya daripada menghancurkannya
Michael Kork.

1
mereka bukan hal yang sama.
Kamuran Sönecek

36

Saya menemukan diri saya dalam situasi yang sama dengan perbedaan daripada dalam kasus saya elemennya adalah wadah fleksibel. Jika bukan kasus Anda pekerjaan yang mudah di sekitar bisa

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

dalam kasus saya karena fakta bahwa banyak browser yang kami dukung masih memerlukan awalan vendor untuk menghindari masalah, saya mencari solusi mudah lainnya

[class.is-loading]="isLoading"

dimana CSS itu sederhana

&.is-loading { display: none } 

untuk meninggalkan kemudian negara yang ditampilkan ditangani oleh kelas default.


1
Ini berfungsi baik dengan invalid-feedbackkelas bootstrap 4 .
Jess

25

Maaf, saya harus tidak setuju dengan ikatan ke tersembunyi yang dianggap tidak aman saat menggunakan Angular 2. Ini karena gaya tersembunyi dapat ditimpa dengan mudah misalnya menggunakan

display: flex;

Pendekatan yang disarankan adalah menggunakan * ngIf yang lebih aman. Untuk detail lebih lanjut, silakan merujuk ke blog resmi Angular. 5 Kesalahan Rookie yang Harus Dihindari dengan Angular 2

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

12
Saya pikir itu adalah kesalahan pemula untuk mengatakan sesuatu itu buruk sebelum mengetahui persyaratan yang tepat. Jika seseorang tidak ingin elemen dihapus dan dihancurkan dan ditambahkan dan diciptakan kembali, *ngIfadalah pilihan yang buruk. Tetapi Anda benar bahwa konsekuensi perlu dipertimbangkan dan menunjukkan perangkap selalu merupakan ide yang baik.
Günter Zöchbauer

2
Aku tahu apa yang kamu maksud. Ini bukan kata-kata saya tentang ini adalah kesalahan pemula, ini diambil dari blog resmi Angular 2. Saya tidak bermaksud menyinggung siapa pun. Terima kasih sudah menunjukkannya.
Tim Hong

9
Ya, saya tidak berpikir dengan ngIfpasti menjawab pertanyaan ini. Saya ingin menyembunyikan beberapa konten pada halaman yang menyertakan a <router-outlet>. Jika saya gunakan ngIf, saya mendapatkan kesalahan karena tidak dapat menemukan outlet. Saya perlu outlet untuk disembunyikan sampai data saya dimuat, tidak absen sampai data saya dimuat.
Jason Swett

Saya setuju dengan Anda, tetapi masalah yang saya miliki adalah saya ingin menampilkan formulir dan meletakkan nilai di dalamnya jika saya menggunakan * ng. Jika saya akan memiliki kesalahan yang tidak didefinisikan dan dengan properti tersembunyi itu berfungsi dengan baik
Hazem HASAN

@HazemHASAN, tentu. Saya mengerti. Solusinya selalu bersyarat. Dalam kasus Anda, tidak yakin apakah mungkin untuk hanya memeriksa apakah formulir ada sebelum Anda menjalankan kode lain yang menentangnya. Ini semua tentang pertukaran. Apakah Anda ingin cara yang lebih aman untuk menyembunyikan formulir yang tidak akan diimbangi oleh gaya lain di masa mendatang secara tidak sengaja? Atau apakah Anda lebih suka memiliki kenyamanan untuk tidak memeriksa apakah formulir ada?
Tim Hong

4

Jika kasus Anda adalah bahwa gaya adalah tampilan tidak ada Anda juga dapat menggunakan arahan ngStyle dan memodifikasi tampilan secara langsung, saya melakukan itu untuk bootstrap DropDown UL pada itu diatur untuk menampilkan tidak ada.

Jadi saya membuat acara klik untuk "secara manual" mengganti UL untuk ditampilkan

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

Kemudian pada komponen saya memiliki showDropDown: atribut bool yang saya toggle setiap kali, dan berdasarkan int, atur displayDDL untuk style sebagai berikut

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

4

Menurut dokumentasi Angular 1 dari ngShow dan ngHide , kedua arahan ini menambahkan gaya cssdisplay: none !important; , ke elemen sesuai dengan kondisi arahan itu (untuk ngShow menambahkan css pada nilai false, dan untuk ngHide menambahkan css untuk nilai sebenarnya).

Kita dapat mencapai perilaku ini menggunakan Angular 2 directive 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>

Perhatikan bahwa untuk showperilaku di Angular2 kita perlu menambahkan !(tidak) sebelum ngShowVal, dan untuk hideperilaku di Angular2 kita tidak perlu menambahkan !(tidak) sebelum ngHideVal.


4
<div [hidden]="myExpression">

myExpression dapat disetel ke true atau false


2
<div hidden="{{ myExpression }}">Ini tidak akan berfungsi, karena "myExpression" akan dikonversi ke string untuk dirender dalam html. Baik string "benar" dan "salah" benar, sehingga akan selalu disembunyikan
Viprus

3

Jika Anda menggunakan Bootstrap semudah ini:

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

3
Dalam bootstrap 4 menggunakan [hidden]melakukan hal yang sama jadi saya sarankan[hidden]
Vahid

3

di bootstrap 4.0 kelas "d-none" = "display: none! important;"

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

3

Untuk orang lain yang tersandung masalah ini, ini adalah bagaimana saya menyelesaikannya.

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');
    }
  }
}

Saya menggunakan 'visibility'karena saya ingin melestarikan ruang yang ditempati oleh elemen. Jika Anda tidak ingin melakukannya, Anda bisa menggunakan 'display'dan mengaturnya 'none';

Anda dapat mengikatnya ke elemen html Anda, secara dinamis atau tidak.

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

atau

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

2

Gunakan tersembunyi seperti Anda mengikat model apa pun dengan kontrol dan tentukan css untuknya:

HTML:

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

CSS:

[hidden] {
   display: none;
}

2

inilah yang bekerja untuk saya:

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


1

bagi saya, [hidden]=!vartidak pernah berhasil.

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

Dan, <div *ngIf="expression">Selalu berikan hasil yang benar.


0

Ada dua contoh pada dokumen Angular https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Arahan bisa menyembunyikan paragraf yang tidak diinginkan dengan mengatur gaya tampilan ke tidak ada.

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

Anda dapat menggunakan [style.display] = "'block'" untuk mengganti ngShow dan [style.display] = "'none'" untuk mengganti ngHide.


0

Cara terbaik untuk mengatasi masalah ini menggunakan ngIf Karena ini juga mencegah elemen yang ditampilkan di front-end,

Jika Anda menggunakan [hidden]="true"atau menyembunyikan gaya, [style.display]itu hanya akan menyembunyikan elemen di ujung depan dan seseorang dapat mengubah nilainya dan terlihat dengan mudah, Menurut saya cara terbaik untuk menyembunyikan elemen adalahngIf

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

dan juga Jika Anda memiliki beberapa elemen (perlu mengimplementasikan yang lain juga), Anda dapat Menggunakan <ng-template>opsi

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

contoh kode ng-template


0

Jika Anda hanya ingin menggunakan simetris hiddenshown arahan / yang AngularJS datang, saya sarankan menulis arahan atribut untuk menyederhanakan template seperti itu (diuji dengan 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';
  }
}

Banyak solusi lain yang benar. Anda harus menggunakan *ngIfjika memungkinkan. Menggunakan hiddenatribut can menerapkan gaya tak terduga, tetapi kecuali jika Anda menulis komponen untuk orang lain, Anda mungkin tahu apakah itu. Jadi agar shownarahan ini berfungsi, Anda juga ingin memastikan bahwa Anda menambahkan:

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

untuk gaya global Anda di suatu tempat.

Dengan ini, Anda dapat menggunakan arahan seperti:

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

dengan versi simetris (dan berlawanan) seperti:

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

Untuk menambahkan pada keharusan - Anda juga harus kita awalan seperti begitu [acmeShown]vs hanya[shown] .

Alasan utama saya menggunakan shownarahan atribut adalah untuk mengubah kode AngularJS ke Angular -AND- ketika konten yang disembunyikan berisi komponen kontainer yang menyebabkan perjalanan pulang-pergi XHR. Alasan saya tidak hanya menggunakan [hidden]="!myVar"ini adalah karena sering kali ini lebih rumit seperti: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[diperlihatkan] `hanya lebih mudah untuk dipikirkan.


-1

Untuk menyembunyikan dan menampilkan div pada tombol klik di sudut 6.

Kode Html

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

Komponen .ts Code

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

ini berfungsi untuk saya dan ini adalah cara untuk mengganti ng-hide dan ng-show di angular6.

Nikmati...

Terima kasih


Anda menggunakan ngIf - yang berbeda dari ngShow. NgIf akan menghapus / menambahkan elemen dari DOM. Ini tidak sama dengan ngShow / ngHide yang hanya akan menambah / menghapus gaya Css ke Elemen.
Gil Epshtain

Contohnya terlalu panjang dan terlalu spesifik.
masterxilo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.