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

2024-05-15 • 问答

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

<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次也不应该发生 _可伸缩性问题，因为对数百张图片使用此方法非常耗时

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

谢谢！

用户，以Angular方式进行制作。

首先定义一个包含url和text以及变量

的对象数组

    protected override Expression VisitNewArray(NewArrayExpression node)
    {

            var source = Expression.Parameter(typeof(IEnumerable<>).MakeGenericType(typeof(MethodCallExpression)),"source");

            var asParallel =
                Expression.Call(
                    typeof(ParallelEnumerable),nameof(ParallelEnumerable.AsParallel),new[] { typeof(ParallelQuery<MethodCallExpression>) },source
                );

            return ***???***
    }

使用ngFor like

后

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

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

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

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

大家都在问