tengo tres mesas
<table class="table1"> ... <tbody> <tr *ngFor="let data of datasource1"> ... </tr> </tbody> </table> <table class="table2"> ... <tbody> <tr *ngFor="let data of datasource2"> ... </tr> </tbody> </table> <table class="table3"> ... <tbody> <tr *ngFor="let data of datasource3"> ... </tr> </tbody> </table>y de alguna manera quiero tener el control de qué tabla debe mostrarse en qué orden, es decir, primero table3 luego table1 luego table2 (o algún otro orden). ¿Como podría hacerlo?
Se pueden crear plantillas para cada tabla y representarlas en el orden requerido según una condición.
Crear plantillas de tablas:
<ng-template name="table1"> <table class="table1"> ... <tbody> <tr *ngFor="let data of datasource1"> ... </tr> </tbody> </table> </ng-template> ... similarly for table2, 3 Supongo que hay un order variable en su archivo component.ts que define el orden a usar. Y
Entonces, el html para representar en el orden requerido podría ser uno de los siguientes según su caso
1.
<ng-container *ngIf="order === 1"> <ng-container *ngTemplateOutlet="table1"> <ng-container *ngTemplateOutlet="table2"> <ng-container *ngTemplateOutlet="table3"> </ng-container> <ng-container *ngIf="order === 2"> <ng-container *ngTemplateOutlet="table2"> <ng-container *ngTemplateOutlet="table3"> <ng-container *ngTemplateOutlet="table1"> </ng-container> Note: *ngIf needs to be updated with required condition .... other conditions <ng-container *ngTemplateOutlet="order === 1 ? table1 : order === 2 ? table2 : table3"> <ng-container *ngTemplateOutlet="order === 1 ? table2 : order === 2 ? table3 : table1"> <ng-container *ngTemplateOutlet="order === 1 ? table3 : order === 2 ? table1 : table2">Puede usar CSS, envolver las tablas en un div y aplicar flex box - display: flex; Asigne a cada mesa un orden - orden: 0; orden: 1; y así.