我有三張桌子
<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>
我想以某種方式控制哪個表格應該以哪種順序顯示，即首先 table3 然后 table1 然后 table2 （或其他一些順序）。我該怎么做？
uj5u.com熱心網友回復：
可以為每個表創建模板，并根據條件以所需的順序呈現。
創建表格模板：
<ng-template name="table1">
<table class="table1">
...
<tbody>
<tr *ngFor="let data of datasource1">
...
</tr>
</tbody>
</table>
</ng-template>
... similarly for table2, 3
我假設order您的 component.ts 檔案中有一個變數定義了要使用的順序。和
- 如果它的值為 1：表的順序是 1、2、3
- 如果它的值為 2：order 為 2, 3, 1
- 如果它的值為 3：order 為 3, 1, 2
因此，根據您的情況，按所需順序呈現的 html 可能是以下之一
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">
uj5u.com熱心網友回復：
您可以使用 CSS，將表格包裝在一個 div 中并應用彈性框 - display: flex; 為每個表分配一個訂單 - order: 0; 訂單：1；等等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/317145.html