单击后如何使用 [ngStyle] 显示和隐藏 div

Question

I´m trying to display a div after doing a click on a button. this click calls a function from my component.ts.

I want to display the results on this , but I want that this remains hidden, before I call this function, I dont really get the solution,thats could be maybe easier with Jquery..but I dont use it with Angular yet.

I´d thank any help..thanks a lot :))

the code, first the view

 <div id="titulo-filme"> <h2>{{ titulo }}</h2> </div> <div id="film-jahren"> <ul> <li *ngFor="let dato of datos;let indice = index"> {{ dato.year }} <button #btnInfo type="button" [disabled]="click[indice]" (click)="**verInfoPorIndice(indice)**; click[indice] = true "><img src="../assets/images/claqueta.png"></button> </li> </ul> </div> <div id="filmContent" #filmContent [ngStyle]="{'display':infoFilm ? 'block' : 'none'}"> <ul *ngFor="let film of infoFilm; let indice = index"> <li [ngStyle]="{'color':film.year == 1920 ? 'red' : 'white' }">{{ film.year }}</li> <li>Titel: {{ film.name }}</li> <li>Genre: {{ film.gender }}</li> <li> Hauptrolle: {{ film.mainrole }}</li> <li>Regisseur: {{ film.director }}</li> <li [ngStyle]="{'align-content':film.year > 1895 ? 'center' : 'center'}"><p><img src="../assets/images/{{ film.bild }}"></p></li> </ul> <br> </div>

and the function in filme.component.ts

 verInfoPorIndice(indice){ if(this.films.indexOf(indice)){ this.infoFilm.push(this.films[indice]); return this.infoFilm; } }

Answer 1

Just use *ngIf and check whether the length of array contains elements *ngIf="infoFilm && infoFilm.length > 0" :

<div id="titulo-filme">
    <h2>{{ titulo }}</h2>
</div>
<div id="film-jahren">
    <ul>
        <li *ngFor="let dato of datos;let indice = index">
                {{ dato.year }}
            <button #btnInfo type="button" [disabled]="click[indice]" 
                (click)="verInfoPorIndice(indice); click[indice] = true ">
            <img src="../assets/images/claqueta.png"></button>
        </li>   
    </ul>   
</div>


<div id="filmContent" #filmContent *ngIf="infoFilm && infoFilm.length > 0">     
    <ul *ngFor="let film of infoFilm; let indice = index">
        <li [ngStyle]="{'color':film.year == 1920 ? 'red' : 'white' }">{{ film.year }}</li>
        <li>Titel: {{ film.name }}</li>
        <li>Genre: {{ film.gender }}</li>
        <li> Hauptrolle: {{ film.mainrole }}</li>
        <li>Regisseur: {{ film.director }}</li>
        <li [ngStyle]="{'align-content':film.year > 1895 ? 'center' : 'center'}"><p> 
        <img src="../assets/images/{{ film.bild }}"></p></li>               
    </ul>
    <br>        
</div>