1

单击按钮后，我试图显示一个 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;
  	}

  }

4

1 回答 1

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>
于 2020-03-06T08:31:02.140 回答