Question

我正在构建这个应用程序，我从API加载一个列表。但是在加载3个列表项之后，应该有一个空的空间来添加广告。广告是从我自己的API加载的。我的问题是我不知道如何在数据之间添加空白空间。我将链接添加到下面的图片中，您将看到我的意思。

Answer 1

我最近遇到了同样的问题。我所做的是，我用一个索引重复列表，如果索引大于n，那么我会展示一些推荐的广告。

即：

<div *ngFor="let business of businesses; let i = index">
   <ion-list class="business-list" *ngIf="i <= 4">
       <business [business]="business"> </business>
    </ion-list>
    <!-- Here at the fifth position of my list I want to display the ads -->
    <div class="card-container" *ngIf='i == 4'>
        <h4>Recommended</h4>
          <ion-slides>
            <div *ngFor="let info of ads; let j = index">
              <div *ngIf='j<2'> <!-- This is because I only want 2 ads -->
                <ion-slide>
                  <business [business]="info" [isRecommended]="true"></business>
                </ion-slide>
              </div>
            </div>
         </ion-slides>
     </div>
      <!-- Items to be shown after the the ads are done -->
      <ion-list class="business-list" *ngIf='i > 4'>
        <business [business]="business"> </business>
      </ion-list>
    </div>

Answer 2

如果每个离子项都是一个组件，您可以使用ng-content将一些模板放入组件中。

<my-comp [event]="event" *ngFor="let event of listEvents?.event; let i = index;">
    <advertisement *ngIf="(i+1) % stepAds === 0"></advertisement>
  </my-comp>

MY-comp.html

<ion-item>Data</ion-item>
<ng-content></ng-content>

否则，如果您没有组件，则可以使用与ng-template相同的逻辑

<ng-template *ngFor="let i of items; let i = index">
    <ion-item>Data</ion-item>
    <div *ngIf="(i + 1) % 3 === 0">advertisement<div>
</ng-template

ng-template不会在DOM中输出。

希望对你有所帮助。

如何在离子列表中添加广告横幅

2 个答案: