組件之間的行，有條件地在ngFor循環

Question

我有兩個組件，圖像和圖像。圖像顯示縮略圖圖像（ThumbnailUrl）這樣下文中，從而有效地創建包含列的行的最多4

<div class="row"> 
    <div class="col s3" *ngFor="let image of images | search:search; trackBy: trackByFn; let i = index"> 
     <app-image [image]="image"></app-image> 
    </div> 
</div> 

當用戶點擊在圖像上的列表，我想顯示完整圖像（ SourceUrl）。這是我的數據模型。

export class Image { 
    constructor(
     public id: Number, 
     public Key: string, 
     public SourceUrl: string, 
     public ThumbnailUrl: string, 
     public Tags: string 
    ) { } 
} 

我想要做的是每行最多4列。如果其中一個圖片被點擊，我想要在最近的第四列之後出現一個新行。這將有效地創建一個乾淨的中斷，因此在上面的行中將不會出現空列，其中將顯示該圖像。例如，如果用戶點擊第二張圖片，我希望整個圖片在行的下方連續顯示，而不是接下來的4張圖片。接下來的4張圖片縮略圖會出現在源圖片下方。

現在，這是工作：

公共showSourceImage（指數：編號，thumbImage：圖片）：布爾{ //獲得一個匹配的圖像的索引。 sourceImage是由圖像組件發送的可觀察對象。 如果（this.sourceImage & & thumbImage.id === this.sourceImage.id）{// 基於獲取所選擇的圖像上最近的一排，所以我們知道在哪裏放置新行 this.indexToUse = this.getNearestRowIndex （指數4）; }

// If the image from the ngFor is where we want to add the image, display the full image after it 
    if (this.indexToUse === index) { 
     this.indexToUse = -1; 
     return true; 
    } 

    return false; 
} 

// Math to determine what the nearest 4th column is based on an index 
private getNearestRowIndex(index: number, row: number): number { 
    return (Math.ceil((index + 1)/row) * row) - 1; 
} 

這實際上讓我確定的圖像選擇的圖像匹配，並獲得最接近第4列。如果ngFor是在最近的第4列，加上我們選擇它下面的圖片：

<div class="row"> 
    <div *ngFor="let image of images | search:search; trackBy: trackByFn; let i = index"> 
     <div class="col s3"> 
      <app-image [image]="image"></app-image> 
     </div> 
     <!-- If this image matches the selected image, create an index based on it of the closest 4th column. 
     If this is the index of the 4th closest column, display the sourceImage as a new row. --> 
     <div class="row" *ngIf="showSourceImage(i, image)"> 
      <div class="col s12"> 
       <img class="responsive-img" src="{{sourceImage.SourceUrl}}" /> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

從我從你的問題的理解，確實是這樣的解決您的問題？如果您可以提供更多關於其他場景的預期行爲，例如用戶單擊另一個圖像後單擊另一個圖像時應該發生的情況，或者希望在隨後的單擊時添加更多行，或者應該稍後消失/替換等等。我可以嘗試修改它。

<div class="row"> 
    <div class="col s3" *ngFor="let image of images | search:search; trackBy: trackByFn; let i = index"> 
     <app-image [image]="image" (click)="imageClicked(image)"></app-image> 
    </div> 
</div> 

<div class="row" *ngIf="isImageClicked"> 
    <div class="col s12"> 
     <app-image [differenceImage]="selectedImage"></app-image> 
    </div> 
</div> 

內，您的組件

isImageClicked = false; 
selectedImage: <Specify Type of Image you use if you have one>; 

imageClicked(image: <Specify Type of Image you use if you have one>) { 
this.isImageClicked = true; 
this.selectedImage = image; 
}