Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

90
Vistas
Angular mat-table displaying repeat rows

I am trying to create a relatively simple mat-table that displays elements from a "dataSource". My problem is that when I run my code it gives me the error: There can only be one default row without a when predicate function. Adding multiTemplateDataRows to my <mat-table> fixes this problem but makes it so that all of the elements in my table are duplicated (two of them). Picture displaying duplication I want to understand why is is happening. I believe that in my case the items are duplicated because I have exactly two columns. Can someone help me understand? My Code: HTML:

<mat-table [dataSource]="siteContacts" multiTemplateDataRows class="table" fxLayout="column wrap">
      <ng-container [matColumnDef]="col" *ngFor="let col of siteContactColumns">
        <mat-header-cell *matHeaderCellDef>
        </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <div [ngSwitch]="siteContactDataSchema[col]">
            <div *ngSwitchCase="'ContactTitle'">
              {{element[col]}}
            </div>
            <span *ngSwitchDefault>
              {{element[siteContactDataSchema[col][0]]}} <br>
              {{element[siteContactDataSchema[col][1]]}} <br>
              {{element[siteContactDataSchema[col][2]]}}
            </span>
          </div>
        </mat-cell>
        <mat-row *matRowDef="let row; let even = even; columns: siteContactColumns;" [ngClass]="{gray: even}">
        </mat-row>
      </ng-container>

    </mat-table>

Typescript:

const SITE_CONTACTS_SCHEMA = {
  "ContactTitle": "ContactTitle",
  "ContactInfo": ["ContactName", "ContactCellPhone", "ContactEmail"]
}
...
  siteContactDataSchema = SITE_CONTACTS_SCHEMA;
  siteContactColumns: string[] = ['ContactTitle', 'ContactInfo'];
...
this.siteDirectoryService.getAllSiteContacts(this.parentSiteId).subscribe(res => {
      this.siteContacts = res;
    })
7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.