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

那是因为在带有col-sm-2语句的div上方有一个ngIf包装div占用了此空间。

假设您的课程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>

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

1 个答案: