Angular 2 [hidden] nu pare să funcționeze? (Programare, Angular)

Serj Sagan a intrebat.

Componenta mea este definită în acest fel:

import { Component } from 'angular2/core'

@Component({
    selector: 'sidebar',
    templateUrl: 'js/app/views/sidebar.html',
})
export class SidebarComponent {
    public sections: boolean[] = [
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false
    ];
}

Componenta sidebar.html șablon:

<h3 class="proofTitle">...</h3>
<p [hidden]="sections[0]">
    ...
</p>
<p [hidden]="sections[1]">
    ...
</p>
...
<p [hidden]="sections[7]">
    ...
</p>

Pare destul de simplu, dar, din anumite motive, arată toate secțiunile… ce îmi scapă?

Comentarii

  • Ați verificat dacă atributul hidden este adăugat elementelor în DOM? (în devtools) –  > Por Günter Zöchbauer.
  • Da, este…. și cu asta am depistat și eu eroarea mea… boolean array trebuie să aibă valorile inversate… duh –  > Por Serj Sagan.
6 răspunsuri
bertrandg

Verifică dacă nu ai nici un afișare regula css pe pagina dvs. <p> care ar putea anula regula hidden comportament, cum ar fi:

p {
  display: inline-block !important;
}

Deoarece hidden atributul html se comportă ca display: none

Comentarii

  • Nu înțeleg ce vrei să spui @MarkRajcok, angular2 adaugă sau elimină atributul hidden atributul html în funcție de expresia care urmează cu această sintaxă. Iar răspunsul meu vorbește despre o eroare care nu are legătură cu angular. Este vorba despre comportamentul acestuia care ar putea fi anulat de o regulă css. davidwalsh.name/html5-hidden –  > Por bertrandg.
  • Scuze, am citit prea repede răspunsul tău… Mi s-a părut că am citit „asigurați-vă că aveți” nu „asigurați-vă că nu aveți”… greșeala mea. Mi-am șters comentariul. –  > Por Mark Rajcok.
  • Nu este nevoie să specificați „!important”, deoarece regula [hidden] este doar „display:none”. Deci, dacă, din întâmplare, definiți o regulă mai puternică pentru afișare în css-ul dvs., nu va funcționa. –  > Por XFCC.
  • !important nu ar trebui să fie niciodată o soluție –  > Por Emobe.
ranbuch

Trebuie doar să adăugați acest cod:

p[hidden] { display: none; }

la pagina dvs. styles.css fișier.

Comentarii

  • Un răspuns excelent! Acest lucru suprascrie stilul de afișare pe care îl am pe elementele mele pentru atunci când nu vreau să fie afișat. –  > Por Luminous.
Janak Bhatta

if display: none property is override use *ngIf="false"

Comentarii

  • Ascunsă este diferită de *ngIf. [hidden] doar ascunde un element, în schimb, ngIf recreează un element de fiecare dată când expresia este setată la true. Deci, este mai costisitor și nu ar trebui să fie folosit în loc. Ar trebui să știți acum unde să folosiți una sau alta. –  > Por Michael Jota.
  • pentru a evita comportamentul nedorit al css, ngIf este recomandat în loc de hidden aici pentru: angularjs.blogspot.fr/2016/04/04/… (vezi prima secțiune) –  > Por boly38.
Vlad

Ca o alternativă, folosiți acest lucru:

[style.display]="sections[i] ? 'none' : 'block'"

Thierry Templier

De fapt, pentru a ascunde elementele care utilizează HTML5 hidden valoarea true trebuie să fie returnată de expresia dumneavoastră. În acest caz, atributul va fi prezent în DOM în memorie. Atunci când valoarea este false, atributul nu este prezent, iar elementul este vizibil.

Sper să vă fie de ajutor, Thierry

damivazbien

dacă mergeți la dom puteți vedea că hidden face acest stil

p[attributes Style]
{
   display: none;
}  

și acest lucru afectează toate elementele p, puteți vedea cum se lucrează aici:

http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/

Tags: