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

【问题标题】：How to add advertisement banner to list in ionic如何在离子列表中添加广告横幅
【发布时间】：2020-05-04 01:49:07
【问题描述】：

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

【问题讨论】：

标签： typescript ionic-framework ionic3

【解决方案1】：

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

IE：

<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>

【讨论】：

【解决方案2】：

如果每个 ion-item 都是一个组件，您可以使用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 中输出。

希望对你有帮助。

【讨论】：