Angular 将可见性设置为“隐藏”后删除表行之间的间隙

我试图有条件地隐藏我的mat表中的行。有些行将被隐藏，有些则不会。每行之间有一个很小的间隙。但是，当一行被隐藏时，它会在其位置上留下稍大的间隙。有没有一种方法可以在不存在额外间隙的情况下隐藏行

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

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>

标题

---

您可以使用*ngIf，以便一开始就不渲染行

---

我尝试了很多解决方案，终于找到了！虽然没有我想要的那么纯，但效果很好：

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>

---

诀窍是将最小高度设置为0！重要的是不要有你所谈论的空白； 您是否尝试过显示：无？是的，当我说我尝试设置css显示时，这就是我引用的内容。我应该说得更具体一些，并说将显示设置为“无”。但是，它产生了相同的结果。您尝试过使用[hidden]吗？这会产生相同的结果。因此，唯一的方法是使用*ngIf，以便不创建所有行。你可以试试看，但不一定行得通。如果没有，则可以从数据源拼接不可见行：his.datasource.spliceindexRowInvisible，1；我考虑过这个问题，但不知道该怎么做，因为我需要行的属性。我该怎么做呢？你能创建一个codesandbox来用一个完全有效的例子来说明你的问题吗？