Angular 如何将文本框与角度图像关联？

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

<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');
}

{{team_text_1}}
{{team_text_2}}
表演会员（活动）{
document.getElementById（event.target.id）.classList.add（'visible'）；
}

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

如何改进我的方法

---

谢谢！

用户，请用有角度的方式制作

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

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

使用后如

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

{{text}}

---

Angular的“哲学”使视图（html）和模型（ts中的变量）之间的关系成为可能。当然，你可以像旧的.html和javascript一样使用，但是你失去了Angular的功能。两幅图像的源代码都是一样的。嗨，John，谢谢你的回复！不，不是，我现在更改了它