Question

我目前的前端任务存在很大问题。设计人员为平板电脑和手机上的项目显示构建了以下模板。

如您所见，除了最后一行项目之外，平板电脑上的水平分隔符后面跟着一对项目。在电话上，每个单独的项目后面跟着除最后一项之外的分隔符。

以下是模板摘录：

＆＃13;

<div class="row" *ngIf="customer">
    <div class="col-md-6 col-sm-6 col-xs-12" *ngFor="let item of customer.items">
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive product-thumbnail" [src]="item.itemImageUrl">
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
                <div class="item-heading">
                    <b>{{ item.title }}</b>
                </div>
                <div class="item-details">
                    Item: 
                    <b>#{{ item.style }}</b><br>
                    SKU: 
                    <b>{{ item.sku }}</b><br>
                    Size:
                    <b>{{ item.size }}</b><br>
                    Color:
                    <b>{{ item.color }}</b>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

我尝试使用来自 ngFor 的 odd 和 last 以及使用媒体查询的CSS类可见性来解决此问题无济于事。如果有人成功处理过，请告诉我需要做些什么才能使其正常工作。谢谢！

Answer 1

您可以使用ng-container包装当前项目div并在容器上使用ngFor。这将允许您每2件物品（片剂小时）注射一小时。

<div class="row" *ngIf="customer">
  <ng-container *ngFor="let item of customer.items; let isOdd = odd; let isLast = last">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <!-- Your other code -->
      <!-- This is the hr at the mobile size (xs)
      <hr class="visible-xs" *ngIf="!isLast">
    </div>

    <!-- This is the hr at the tablet size (sm+)
    <div class="col-sm-12 visible-sm visible-md visible-lg" *ngIf="isOdd && !isLast">
      <hr>
    </div>
  </ng-container>
</div>

分解代码。

第一小时（移动）

<hr style="display: none" [ngClass]="{'visible-xs': !isLast}">

从您的设计中，列表中的最后一项不应低于它。 ngIf条件确保最后一小时不呈现。您可以在这些小时使用visible-xs类，这样它们只能以xs大小显示。

第二小时（片剂）

<div class="col-sm-12 visible-sm visible-md visible-lg" *ngIf="isOdd && !isLast">
    <hr>
</div>

与移动设备相同，由于ngIf中的条件，最后一小时不可见。您只在除最后一项之外的奇数项之后渲染小时。您可以使用visible-sm visible-md visible-lg类以适当的大小显示小时（注意：您也可以使用hidden-xs，但我不确定此小时所需的大小）

这是一个stack blitz演示。

如何使用* ngFor为平板电脑和手机视图渲染分隔线？

1 个答案:

分解代码。