Question

我在隐藏并以角度4显示元素时遇到问题。

我的Html：

＆＃13;

<div class='row'>
  <div class='col-md-4 imgTxt' *ngFor="let path of imagePaths" >
    <img [id]='path.id' (mouseenter)="ent(path.img)" class="d-block w-   100 image"  [src]='path.img' alt="Third slide">
    <div class="middle">
      <div class="text">{{path.txt}}</div>
    </div>
  </div>
 </div>

＆＃13;

最初，我想要隐藏div（class =＆＃39; middle＆＃39;）。当我将移动设备悬停在图像上时，特定的中间div将显示。

我的ts档案： enter image description here

＆＃13;

export class SpecialityComponent implements OnInit {
  imagePaths ;
 
  constructor() { 
    this.imagePaths = [
      {id:"a",img:'assets/images/3.JPG',txt:'Breakfast'},
      {id:"b",img:'assets/images/1.JPG',txt:'Lunch'},
      {id:"c",img:'assets/images/2.JPG',txt:'Dinner'},
      {id:"d",img:'assets/images/3.JPG',txt:'Breakfast'},
      {id:"e",img:'assets/images/1.JPG',txt:'Lunch'},
      {id:"f",img:'assets/images/2.JPG',txt:'Dinner'}
    ];
    
  }

＆＃13;

ngOnInit（）{

}

我的输出： enter image description here

提前致谢。

Answer 1

你应该在每个对象中使用一个属性来实现如下，

<div class='row'>
  <div class='col-md-4 imgTxt' *ngFor="let path of imagePaths" >
    <img [id]='path.id' (mouseenter)="ent(path)" class="d-block w-   100 image"  [src]='path.img' alt="Third slide">
    <div class="middle">
      <div class="text" *ngIf="path.showText">{{path.txt}}</div>
    </div>
  </div>
 </div>

方法应该看起来像

ent(path){
    path.showText = true;
}

注意：我使用ngIf来显示和隐藏文字，并将showText属性设置为false，如下所示，

[
      {id:"a",img:'assets/images/3.JPG',txt:'Breakfast', showText:false},
      {id:"b",img:'assets/images/1.JPG',txt:'Lunch', showText:false},
      {id:"c",img:'assets/images/2.JPG',txt:'Dinner', showText:false},
      {id:"d",img:'assets/images/3.JPG',txt:'Breakfast', showText:false},
      {id:"e",img:'assets/images/1.JPG',txt:'Lunch', showText:false},
      {id:"f",img:'assets/images/2.JPG',txt:'Dinner', showText:false},
    ];

Answer 2

试试这个。它为我工作。

 <div class='row'>
   <div class='col-md-4 imgTxt' *ngFor="let path of imagePaths;let i = 
    index;" >
    <img [id]='path.id' (mouseenter)="showText = (i+1)" 
     (mouseleave)="showText = 0" class="d-block w-100 
     image"  [src]='path.img' alt="Third slide">
     <div class="middle">
     <div class="text" *ngIf="showText === (i+1)">{{path.txt}}</div>
   </div>
  </div>
</div>

和你的ts文件

export class SpecialityComponent implements OnInit {
  showText = 0; // declare this property
}

如何隐藏/显示当前元素（使用* ngfor）

2 个答案: