僅顯示點擊項目的類角2

我不知道如何設置可見類只針對部分組件中的點擊項目。所以，我temaplate有：僅顯示點擊項目的類角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>

在組件我初始化他們..

export class ImageModal implements OnInit, AfterViewInit { 
    @ViewChild('reviewFileInput') reviewFileInput: ElementRef; 
    @Input('modalImages') public modalImages: any; 
    @Input('imagePointer') public imagePointer: number; 
    @Output('cancelEvent') cancelEvent = new EventEmitter<any>(); 
    @Input('imageClass') public imageClass: any; 
    ...

然後在接下來的模板讓他稱之爲「附加照片組分」，我想使用這個類我接下來我宣佈：

<ImageModal #imageModal 
         [modalImages]="images" 
         [isReviewPhotos]="true" 
         [imageClass]="classMap" 
         (cancelEvent)="cancelImageModel()" 
         [options]="options" 
         [isUploadButtonAvailable]="isUploadButtonAvailable" 
         (clickEvent)="onUploadClick()" 
         (handleEvent)="handleNgUpload($event)" 
         (deleteEvent)="deleteImage($event)" 
         (handleSelectedImgEvenet)="onImageClick($event)" 
         (imageContainer)="{'img-media-container': isImageSelected}"> // And this class which I want to use 
</ImageModal>

然後在添加組件，光電組件我想設置點擊圖像

這個牆根類0

onImageClick($event) { 
     if ($event && $event.index >= 0) { 
      this.selectedImage = this.images[$event.index]; 
      this.isImageSelected = !this.isImageSelected; 
     } 
    }

風格：

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

所以我怎麼能只在一個選擇的項目申請類。我知道，不知何故，我需要從主模板中獲取索引，但我沒有任何想法，我怎麼能意識到這一點。

來源

2017-03-27 Vitaliy

你想在哪個元素上添加類？你的偏愛是什麼？在你的* ngFor中點擊元素？ –

糾正我，部分組件是我在哪裏使用。在這個組件中，我想添加類 – Vitaliy

我想你完全錯了。我看到一些錯誤。你可以在你試圖調用這個組件的地方發佈整個ImageModal組件嗎？ –

您的文章很混亂，我不知道哪個代碼屬於哪個組件。但是根據所選元素添加類很簡單，並且總是看起來類似。嘗試了這種方式：

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

您可以從角創作者找到同樣的例子代碼official tutorial。在章節內搜索：所選英雄的風格

來源

2017-03-27 12:55:42

我更新了我的主題，請再次檢查。變量selectedImage位於add-photo-component中，此代碼來自ImageModal組件。 – Vitaliy

它在角度2中非常酷。創建和初始化數組的想法。點擊div時div的索引應該被壓入初始化數組中。並將此類添加到僅滿足條件的div。

獲取索引。

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

對於添加CSS類

<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是條件）

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html 轉到鏈接查看更多細節

來源

2017-03-27 13:41:00

僅顯示點擊項目的類角2

回答

相關問題