如何将文本框与 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 次也不应该发生 _ 可扩展性问题，因为对数百张图像使用这种方法非常耗时

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

谢谢！

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 的力量