Html 使用*ngIf=”时删除空白；pet.doado==false"；

当我使用*ngIf=“pet.doado===false”过滤前端显示的数据时，有一个空格：

代码：

{{pet.nome}}
Idade:{{pet.Idade}}

塔曼霍：{{pet.Tamanho}}

Cor:{{pet.Cor}

Sexo:{{pet.Sexo}



Pessoa响应域：{{pet.nomeUser}

电话机：{{pet.telefoneUser}

Estáno Bairro:{{pet.Bairro}

代码正确：

<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>

{{pet.nome}}
Idade:{{pet.Idade}}

塔曼霍：{{pet.Tamanho}}

Cor:{{pet.Cor}

Sexo:{{pet.Sexo}



Pessoa响应域：{{pet.nomeUser}

电话机：{{pet.telefoneUser}

Estáno Bairro:{{pet.Bairro}

---

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

这是因为div上方有一个

col-sm-2

wrapper div，其中的

ngIf

语句占用了这个空间

假设您的类

teste

不占用任何宽度，您可以将

col-sm-2

与

ngIf

一起放入包装器

div

例如：

{{pet.nome}}
Idade:{{pet.Idade}}

塔曼霍：{{pet.Tamanho}}

Cor:{{pet.Cor}

Sexo:{{pet.Sexo}



Pessoa响应域：{{pet.nomeUser}

电话机：{{pet.telefoneUser}

Estáno Bairro:{{pet.Bairro}

在这种情况下，呈现的HTML可能非常有用。您也可以共享CSS吗？我使用了您的答案作为基础，但我使用了不同的代码，我在问题中添加了更新的代码。当然。有很多方法可以做到这一点。只是想指出你遗漏了什么

<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>

<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>