Как я могу отобразить и скрыть div с помощью [ngStyle] после нажатия на <button>

Question

Я пытаюсь отобразить div после нажатия кнопки. этот щелчок вызывает функцию из моего component.ts.

Я хочу отобразить результаты по этому, но я хочу, чтобы это оставалось скрытым, прежде чем я вызову эту функцию, я действительно не получаю решение, это может быть может быть проще с Jquery .. но я пока не использую его с Angular.

Я бы хотел поблагодарить вас за любую помощь .. большое спасибо:))

код, сначала просмотр

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

и функция в filme.component.ts

verInfoPorIndice(indice){

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

  }

Answer 1

Просто используйте *ngIf и проверьте, содержит ли длина массива элементы *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>