如何在特定的垫单元位置打开垫卡

Question

单击要在确切的垫子表格单元格位置显示垫子卡的单元格时，垫子表中有多行。

<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="testOne">
        <th mat-header-cell *matHeaderCellDef> Test One </th>
        <td mat-cell *matCellDef="let element,let i=index">
            <div>
                <mat-icon class="sign-icon" (click)="openCard(i,element?.testOne);$event.stopPropagation();">done
                </mat-icon>

                <div *ngIf="false; else showCard">
                </div>
            </div>
        </td>
    </ng-container>

    <ng-container matColumnDef="testTwo">
            <th mat-header-cell *matHeaderCellDef> Test Two </th>
            <td mat-cell *matCellDef="let element,let i=index">
                <div>
                    <mat-icon  (click)="openCard(i,element?.testTwo);$event.stopPropagation();">done
                    </mat-icon>

                    <div *ngIf="false; else showCard">
                    </div>
                </div>
            </td>
        </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>



<ng-template #showCard>
    <mat-card [class.mat-elevation-z5]="true">
        <div>
            <span >01 Sep,2019</span>
        </div>
    </mat-card>
</ng-template>

如果我单击testOne或testTwo单元格，我要显示垫卡。正在将一些数据传递到存储卡。 如果我在td中添加了mat卡，则在单元格位置显示卡，但由于循环中而显示多个mat卡。

如何在确切的单元格位置显示席卡