<h2 mat-dialog-title>Datos multiples registrados</h2>
<mat-dialog-content>
  <table class="mat-table cdk-table animated fadeIn">
    <thead role="rowgroup">
      <tr class="mat-header-row cdk-header-row ng-star-inserted">
        <th
          align="center"
          class="mat-header-cell cdk-header-cell ng-star-inserted"
          style="width: 3%"
        >
          #
        </th>
        <th
          align="left"
          style="padding-left: 1%"
          class="mat-header-cell cdk-header-cell ng-star-inserted"
          *ngFor="let head of data.estructura.form"
        >
          {{ head.label }}
        </th>

        <th
          class="mat-header-cell cdk-header-cell ng-star-inserted"
          style="width: 20%"
        >
          Acciones
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        class="mat-row cdk-row ng-star-inserted"
        *ngFor="let multi of data.datos; let index = index"
      >
        <td align="center" class="mat-cell cdk-cell ng-star-inserted">
          {{ index + 1 }}
        </td>
        <td
          style="padding-left: 1%"
          class="mat-cell cdk-cell ng-star-inserted"
          *ngFor="let head of multi"
        >
          {{ dataShow(head.value) }}
        </td>
        <td class="mat-cell cdk-cell ng-star-inserted" align="center">
            <button
              mat-mini-fab
              color="warn"
              style="box-shadow: none !important"
              (click)="deleteItem(index)"
            >
              <mat-icon>delete</mat-icon>
            </button>
        </td>
      </tr>
    </tbody>
  </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.datos">Cerrar</button>
</mat-dialog-actions>
