时间戳

首页 > 解决方案 > Angular 7：在 ngIf 上显示 Bootstrap 4 网格图像

angular - Angular 7：在 ngIf 上显示 Bootstrap 4 网格图像

问题描述

我有一个使用 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>

标签： angularbootstrap-4

解决方案

    <div class="row" >
    <div  *ngFor='let image of welcomeDisplay; 
let i = index' [ngClass]="image.status !== sTab.status ? 'col-4':''">
       <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 class="col-4" 并添加了条件类语句 [ngClass]="image.status !== sTab.status ? 'col-4':''"

希望这段代码对你有帮助。

推荐阅读