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

Question

我正在使用棱 Angular Material 来显示一系列图像。我想在 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>

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

Answer 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>

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