ngForループの条件付きで行間のコンポーネント

Question

私は2つのコンポーネント、イメージとイメージを持っています。画像は（事実上、ユーザが画像をクリックすると、私は、完全な画像を表示したい最大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> 

の列を含む行を作成するには、次のようなサムネイル画像（ThumbnailUrl）のリストを表示しますSourceUrl）。ここに私のデータモデルがあります。

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

私がしたいのは、1行に最大4列あります。写真の1つがクリックされた場合は、最も近い第4列の後に新しい行が表示されます。これは効果的にクリーンなブレークを作成し、そのイメージが現れる行の上に空の列がないようにします。たとえば、ユーザーが2番目のイメージをクリックすると、次の4つのイメージではなく、その行の下の行にフルイメージが表示されます。その代わりに、次の4つの画像サムネイルがソース画像の下に表示されます。今のところ

、これが動作している：

公共showSourceImage（インデックス：数、thumbImage：イメージ）：ブール{ //マッチング画像のインデックスを取得します。 sourceImageは、画像コンポーネントによって送信される観測値です。 IF（this.sourceImage & & thumbImage.id === this.sourceImage.id）{ //我々がここで新しい行を置く知っているので、選択された画像に基づいて、最も近い行を取得 this.indexToUse = this.getNearestRowIndex （インデックス、4）;効果的に私は、画像を選択した画像と一致するかどうかを判断し、最も近い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; 
} 

。 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; 
}