如何将文本框与Angular中的图像相关？

Question

我建立了一个画廊，其中包含许多图像+文字类型的对象。一次只显示一个文本框。通过单击图像，将显示相应的文本框。目前，我尝试使用下面的代码，该代码至少有两个问题：

<div class="Container" [id]="id">
  <img [id]="id" id="t_1" src={{t1.jpg}} (click) ="showtext($event)">
  <img [id]="id" id="t_2" src={{t2.jpg}} (click) ="showtext($event)">
</div>

<div *ngIf="t_1" class="text" id="team_text_1" [id]="id" >{{team_text_1}}</div>
<div *ngIf="t_2" class="text" id="team_text_3" [id]="id" >{{team_text_2}}</div>

showMember(event){
  document.getElementById(event.target.id).classList.add('visible');
}

• 由于第一个类，第二个类“ id =“ t_1”不会出现
• 即使看到相同的ID出现2次也不应该发生_可伸缩性问题，因为对数百张图像使用此方法非常耗时

任何想法如何改进/改进我的方法？

谢谢！

Answer 1

用户，使用Angular方法制作。

首先定义一个包含url和text以及变量的对象数组

text:string="";
data:any[]=[
      {url:"t1.jpg",text:"image 1"},
      {url:"t2.jpg",text:"image 2"}
]

使用ngFor后喜欢

<div class="Container" [id]="id">
  <img *ngFor="let item of data" [src]="item.url" (click) ="text=item.text">
</div>
<!--here show the variable "text"-->
<div class="text">{{text}}</div>

角度“哲学”使视图（.html）和模型（.ts中的变量）之间的关系成为可能。当然，您可以像使用旧的.html和javascript一样使用，但是您失去了Angular的功能