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张图片。接下来的4个图像缩略图将显示在源图像下方。

目前，这是有效的：

public showSourceImage（index：number，thumbImage：Image）：boolean { //获取匹配图像的索引。 sourceImage是一个由图像组件发送的可观察对象。 if（this.sourceImage＆amp;＆amp; thumbImage.id === this.sourceImage.id）{ //根据所选图像获取最近的行，以便我们知道新行的放置位置 this.indexToUse = this.getNearestRowIndex（index，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;
}

行之间的组件，有条件地在ngFor循环

1 个答案: