Estoy tratando de crear una tabla de tapete relativamente simple que muestre elementos de un "fuente de datos". Mi problema es que cuando ejecuto mi código me da el error: Solo puede haber una fila predeterminada sin una función de predicado when. Agregar multiTemplateDataRows
a mi <mat-table>
soluciona este problema pero hace que todos los elementos en mi tabla estén duplicados (dos de ellos). Imagen que muestra duplicación Quiero entender por qué está sucediendo. Creo que en mi caso los ítems están duplicados porque tengo exactamente dos columnas. ¿Puede alguien ayudarme a entender? Mi código: 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>
Mecanografiado:
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; })