Question

我正在尝试有条件地将垫子表中的行隐藏起来。有些行将被隐藏，有些则不会。每行之间有一个很小的间隙。但是，当隐藏一行时，它会在其位置留下稍大的间隙。有没有一种方法可以隐藏行而不存在额外的间隙？

我尝试使用CSS设置显示/可见性。

html：

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="Header">
    <th mat-header-cell *matHeaderCellDef>Header</th>
      <td mat-cell *matCellDef="let row" {{row.title}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{'invisible': row.invisible}">
</table>

css：

.invisible {
  visibility: collapse;
}

这在行之间被折叠的行之间留有较大的间隙（也许是几个像素）。我试图将显示设置为无，但是效果相同。

Answer 1

您可以使用* ngIf甚至不首先显示该行。

Answer 2

我尝试了很多解决方案，终于找到了！它不像我想要的那样纯净，但效果很好：

html：

<table *ngIf="isToDisplay" mat-table [dataSource]="dataSource" #categorieQuestions>
            <mat-header-row *matHeaderRowDef="displayedColumns; sticky: false"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{'invisible': !row.visible}"></mat-row>

            <ng-container matColumnDef="libelle-question">
                <mat-header-cell *matHeaderCellDef> Enjeu</mat-header-cell>
                <mat-cell *matCellDef="let question">
                    <div *ngIf="question.visible">
                        <strong>{{question.libelle}}</strong>
                        <div class="reponse-facultative" *ngIf="!question.obligatoire">(Réponse non obligatoire)
                        </div>
                    </div>
                </mat-cell>
            </ng-container>              
        </table>

css：

mat-row {
    height: fit-content !important;

    &.invisible {
        min-height: 0 !important;
        visibility: hidden;
    }
}

技巧是将min-height设置为0！important，以免出现您所说的空白；）

将可见性设置为隐藏后，消除表行之间的间隙

2 个答案: