如何将文本框与 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');
}

第二个class "id="t_1”因为第一个
即使看到相同的 id 出现 2 次也不应该发生 _ 可扩展性问题，因为对数百张图像使用此方法非常耗时

有什么想法可以改进我的方法吗？

谢谢！

Answer 1

用户，在Angular方法中进行。

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

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>

Angular "philosophy" 使视图（.html）和模型（.ts 中的变量）的关系成为可能。当然你可以像旧的一样使用.html和javascript，但是你失去了Angular

的力量

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

How to correlate textboxes to images in Angular?

document

click

gallery

angular