Angular mat-table displaying repeat rows

Question

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;
    })

Angular mat-table displaying repeat rows

0 Answers0