Html 仅为单击的项目2显示类

我不知道如何仅为部分组件中单击的项设置可见类。因此，我已与以下人员进行了交流：

<div class="photo-container" *ngFor ="let i of modalImages; let index = index">
       <div [ngClass]="ImageContainer">
           <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
           <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
       </div>
</div>

风格：

.img-media-container{
    border-radius: 10px;
    border: 3px solid #4774c5;
    padding: 3px;
}

---

那个么，我怎样才能只在一个选定的项目上应用类呢。我知道我需要从主模板中获取索引，但我不知道如何实现这一点

你的帖子乱七八糟，我不知道哪个代码属于哪个组件。但根据所选元素添加类很简单，而且看起来总是类似的。试着这样做：

<div *ngFor ="let image of modalImages; let index = index">
       <div [class.img-media-container]="image === selectedImage" >
          <!-- some code -->
       </div>
</div>

您可以在Angular creators中找到相同的示例代码。

---

在章节中搜索：设置所选英雄的样式

您的帖子很混乱，我不知道哪些代码属于哪个组件。但根据所选元素添加类很简单，而且看起来总是类似的。试着这样做：

<div *ngFor ="let image of modalImages; let index = index">
       <div [class.img-media-container]="image === selectedImage" >
          <!-- some code -->
       </div>
</div>

您可以在Angular creators中找到相同的示例代码。

---

在第章中搜索：为选定的英雄设计风格

在第二章中，它非常酷。这样做的想法是创建并初始化一个数组。单击div时，应将div的索引推送到初始化的数组中。并将该类添加到仅满足条件的div中

用于获取索引。

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

用于添加CSS类

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

（ImageContainer是类名，数组[i]=i是条件）

---

转到链接了解更多详细信息

angular 2非常酷。这样做的想法是创建并初始化一个数组。单击div时，应将div的索引推送到初始化的数组中。并将该类添加到仅满足条件的div中

用于获取索引。

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

用于添加CSS类

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

（ImageContainer是类名，数组[i]=i是条件）

---

转到链接以了解更多详细信息

您要在哪个元素上添加类？你的部分成分是什么？在*ngFor？中的click元素上，请更正，我使用的是部分组件。在这个组件中，我想添加classI，我猜你完全错了。我看到一些错误。您能否将整个ImageModal组件和父组件发布到您尝试调用此组件的位置？@JaroslawK.，update要在哪个元素上添加类？你的部分成分是什么？在*ngFor？中的click元素上，请更正，我使用的是部分组件。在这个组件中，我想添加classI，我猜你完全错了。我看到一些错误。您能发布整个ImageModal组件和您尝试调用此组件的父组件吗？@JaroslawK.，updatedI更新了我的主题，请再次检查。变量SelecteImage位于添加照片组件中，此代码来自ImageModal组件。我更新了主题，请再次检查。变量selectedImage位于AddPhoto组件中，此代码来自ImageModal组件。