Angular 7：ngIf

Question

我有一个使用bootstrap 4卡的显示网格。

我希望遍历一系列图像，但是我只想显示状态正确的图像。

当我将*ngIf='image.status == sTab.status'添加到我的<div class='card'>

是的，它不会显示卡，但会留一个空白。

如果我将卡片放在自己的<div *ngIf=''>里面，那么它将显示为垂直列表而不是网格。

这是我的 welcomeDisplay.component.html ：

<div class="container mainCard">
    <ngb-tabset justify='justified'>
        <div *ngFor='let sTab of statusTabs'>
            <ngb-tab>
                <ng-template ngbTabTitle><b>{{ sTab.title }}</b></ng-template>
                <ng-template ngbTabContent>
                    <div class="row">
                        <div class="col-4" *ngFor='let image of welcomeDisplay; let i = index'>
                            <div class="card" *ngIf='image.status == sTab.status'>
                                <div class="card-title">
                                    <p>Index : {{ i }}</p>
                                    <small>Title : {{ image.title }}</small>
                                </div>                  
                                <div class="card-body">
                                    <img src="{{imageURL}}{{image.imgSrc}}" 
                                         [alt]="image.originalname">                     
                                </div>
                            </div>
                        </div>       
                    </div>
                </ng-template>
            </ngb-tab>
        </div>
    </ngb-tabset>
</div>

Answer 1

C:\WINDOWS\System32\wbem

我删除了div class =“ col-4”并添加了条件类语句[ngClass] =“ image.status！== sTab.status？'col-4'：''”

希望此代码对您有所帮助。