使用 *ngIf = "pet.doado === false" 时删除空格

Question

当我使用*ngIf = "pet.doado === false"过滤前端显示的数据时，出现了一个空格：

代码：

<div class="row content">
    <div class="col-sm-2 teste" *ngFor="let pet of pets | async">
        <mat-card class="example-card" *ngIf="pet.doado === false">
            <mat-card-header>
                <mat-card-title>{{pet.nome}}</mat-card-title>
                <mat-card-subtitle>Idade: {{pet.idade}}</mat-card-subtitle>
            </mat-card-header>
            <img mat-card-image src="{{pet.foto}}" alt="Foto Pet" class="imagePet">
            <mat-card-content>
                <p>
                    Tamanho: {{pet.tamanho}}
                    <br />Cor: {{pet.cor}}
                    <br />Sexo: {{pet.sexo}}
                    <br />
                    <br />Pessoa Responsavel: {{pet.nomeUser}}
                    <br />Telefone: {{pet.telefoneUser}}
                    <br />Está no Bairro: {{pet.bairro}}
                </p>
            </mat-card-content>
        </mat-card>
    </div>
</div>

代码正确：

<div class="row content">
    <ng-container *ngFor="let pet of pets | async">
        <div class="col-sm-2 teste" *ngIf="pet.doado === false">
            <mat-card class="example-card">
                <mat-card-header>
                    <mat-card-title>{{pet.nome}}</mat-card-title>
                    <mat-card-subtitle>Idade: {{pet.idade}}</mat-card-subtitle>
                </mat-card-header>
                <img mat-card-image src="{{pet.foto}}" alt="Foto Pet" class="imagePet">
                <mat-card-content>
                    <p>
                        Tamanho: {{pet.tamanho}}
                        <br />Cor: {{pet.cor}}
                        <br />Sexo: {{pet.sexo}}
                        <br />
                        <br />Pessoa Responsavel: {{pet.nomeUser}}
                        <br />Telefone: {{pet.telefoneUser}}
                        <br />Está no Bairro: {{pet.bairro}}
                    </p>
                </mat-card-content>
            </mat-card>
        </div>
    </ng-container>
</div>

我使用ngFor 添加了一个容器并将ngIf 添加到div。

Answer 1

这是因为在 div 上方有一个 col-sm-2 包装器 div 和 ngIf 语句占用了这个空间。

假设您的课程 teste 不占用任何宽度，您可以将 col-sm-2 与 ngIf 一起放入包装器 div

例如：

<div class="row content">
    <div class="teste" *ngFor="let pet of pets | async">
       <!-- Wrapper div which takes col-sm-2 only on ngIf -->
       <div class="col-sm-2" *ngIf="pet.doado === false">
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>{{pet.nome}}</mat-card-title>
                <mat-card-subtitle>Idade: {{pet.idade}}</mat-card-subtitle>
            </mat-card-header>
            <img mat-card-image src="{{pet.foto}}" alt="Foto Pet" class="imagePet">
            <mat-card-content>
                <p>
                    Tamanho: {{pet.tamanho}}
                    <br />Cor: {{pet.cor}}
                    <br />Sexo: {{pet.sexo}}
                    <br />
                    <br />Pessoa Responsavel: {{pet.nomeUser}}
                    <br />Telefone: {{pet.telefoneUser}}
                    <br />Está no Bairro: {{pet.bairro}}
                </p>
            </mat-card-content>
        </mat-card>
       </div>
    </div>
</div>