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

【问题标题】：How can I display and hide a div with [ngStyle] after doing click on a <button>单击 <button> 后如何使用 [ngStyle] 显示和隐藏 div
【发布时间】：2020-06-18 22:02:05
【问题描述】：

我试图在单击按钮后显示一个 div。这次点击调用了我的 component.ts 中的一个函数。

我想在 this 上显示结果，但我希望它保持隐藏状态，在调用此函数之前，我并没有真正得到解决方案，使用 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;
  	}

  }

【问题讨论】：

• 你应该使用*ngIf="infoFilm " angular.io/api/common/NgIf
• 我确实按照你的建议，但我不工作...

  :(((
• 我确实按照你的建议，但我不工作...

  :(((
• 您应该完全删除样式，ngIf 所做的就是显示或不显示。基于真假陈述或已定义或未定义
• 嗨，谢谢，你一直很有帮助，它有效！！，但是 css 样式丢失了！！我应该如何配置我的 div 的样式？