如何在特定索引处的 ngfor 中插入/显示 div答案

【问题标题】：How to insert/display div inside ngfor at particular index如何在特定索引处的 ngfor 中插入/显示 div
【发布时间】：2019-10-06 15:25:14
【问题描述】：

我正在使用角度材料来显示一系列图像。我想在 ngfor 中的特定索引处显示 div/component

<div #cardPicture fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="left">
    <mat-card matTooltip="{{image.Name}}" class="card-picture" (click)="onViewDetail(image)" *ngFor="let image of images; let i = index">
        <img mat-card-image src="{{image.img}}">
        <div class="name">{{image.Name}}</div>
    </mat-card>
</div>
<!-- Image Detail -->
<div class="details" id="viewImageDetail">
    <app-image-detail [imageDetail]="viewImageDetail"></app-image-detail>
</div>

单击特定图像时，我想在图像下方显示图像细节组件，下一行应该向下滑动

【问题讨论】：

您如何在轮播中显示图像？ '下一行应该向下滑动'是什么意思？
不是轮播，更像是图库。
一个最小的 stackblitz 将使帮助更容易

标签： html typescript css angular-material angular7

【解决方案1】：

我几乎可以实现我想要的。下面是变化

<div #cardPicture fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="left">
   <div class="imageGrid" *ngFor="let image of images; let i = index">
      <mat-card matTooltip="{{image.Name}}" class="card-picture" (click)="onViewDetail(image, i)">
         <img mat-card-image src="{{image.Imagebyte}}">
         <div class="name">{{image.Name}}</div>
      </mat-card>
    <div class="details" id="viewImageDetail" *ngIf="i==index">
      <app-update-image-detail [imageDetail]="viewImageDetail"></app-update-image-detail>
    </div>
   </div>
 </div>

如果有人有任何答案，请随时发布

【讨论】：