Angular 5中实现ngFor每4项后点击添加div及图片详情展开

Hey there! Let's fix this up to get that Google Images-style behavior you want. The key here is to group your media data into rows of 4 first—that way we can easily control the expandable section per row, instead of dealing with individual images scattered across rows.

Step 1: Group your data into rows in the component #

First, we'll create a grouped version of your searchMediaResult array so each entry represents a row of 4 images. Add this to your component class:

groupedMedia: any[][] = [];
expandedRowIndex: number | null = null;
selectedImage: any | null = null;

ngOnInit() {
  // Split searchMediaResult into chunks of 4
  const chunkSize = 4;
  for (let i = 0; i < this.searchMediaResult.length; i += chunkSize) {
    this.groupedMedia.push(this.searchMediaResult.slice(i, i + chunkSize));
  }
  // Ensure exactly 3 rows (pad with empty arrays if needed)
  while (this.groupedMedia.length < 3) {
    this.groupedMedia.push([]);
  }
}

openImageDiv(rowIndex: number, image: any) {
  // Toggle expansion if clicking the same row; else open the new row
  if (this.expandedRowIndex === rowIndex) {
    this.expandedRowIndex = null;
    this.selectedImage = null;
  } else {
    this.expandedRowIndex = rowIndex;
    this.selectedImage = image;
  }
}

Step 2: Update your template to use grouped rows #

Adjust your HTML to loop through the grouped rows, render 4 images per row, and add the expandable detail section below each row:

<div class="container">
  <!-- Loop through each row -->
  <div *ngFor="let row of groupedMedia; let rowIndex = index" class="row mb-3">
    <!-- Loop through images in the current row -->
    <div *ngFor="let image of row" class="col-md-3 col-sm-4 col-xs-6">
      <div class="result-thumb-outer">
        <div (click)="openImageDiv(rowIndex, image)" class="image-holder cursor-pointer">
          <img [src]="image.file_url" [alt]="image.title" class="img-fluid">
          <div class="image-thumb-content">
            <div class="image-title">{{ image.title }}</div>
            <div class="image-date">{{ image.date | date: 'MMMM, y' }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Expandable detail section tied to the row -->
    <div *ngIf="expandedRowIndex === rowIndex && selectedImage" class="col-12 mt-3">
      <div class="image-detail-card p-4 border rounded">
        <h3>{{ selectedImage.title }}</h3>
        <p class="text-muted">{{ selectedImage.date | date: 'MMMM d, y' }}</p>
        <img [src]="selectedImage.file_url" [alt]="selectedImage.title" class="img-fluid mb-3">
        <!-- Add any additional image details here -->
        <p>{{ selectedImage.description || 'No description available.' }}</p>
      </div>
    </div>
  </div>
</div>

Step 3: Add basic styling (optional but improves UX) #

Add these styles to make clickable areas obvious and the detail section polished:

.cursor-pointer {
  cursor: pointer;
}

.image-holder {
  position: relative;
  overflow: hidden;
}

.image-thumb-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.image-holder:hover .image-thumb-content {
  transform: translateY(0);
}

.image-detail-card {
  background: #f8f9fa;
}

Why this works: #

• Grouping data turns each row into a manageable unit, so we can link the expandable section directly to the row containing the clicked image.
• expandedRowIndex tracks which row is open, while selectedImage holds the data for the specific image clicked.
• The expandable div only renders under the matching row index, ensuring it appears in the correct position.
• We added toggle behavior: clicking the same row again closes the detail section, while clicking another row switches the active section.

内容的提问来源于stack exchange，提问作者rohit13807