如何使用 *ngFor 创建带有卡片的水平滚动？答案

【问题标题】：How to create horizontal scroll with cards using *ngFor?如何使用 *ngFor 创建带有卡片的水平滚动？
【发布时间】：2019-05-17 20:41:11
【问题描述】：

我正在使用 Ionic 4，我正在尝试创建一个水平滚动，每个项目都是一张卡片。这些卡片将动态显示（使用 *ngFor）。

我已经尝试过这样的事情：

   <div class="container">
      <div class="scroll" scrollX="true">
        <ion-card *ngFor="let item of items">
           ... 
        </ion-card>
      </div>
   </div>

我之前搜索过的，但是没有用。

我期待的是这样的：



   <ion-row>
      <ion-item>
         <ion-scroll scrollX=true"
            <ion-card *ngFor="let card of cards>
               <ion-card-header>
                  <ion-img src="..."/>
               </ion-card-header>
               <ion-card-content>
                  <p>...</p>
               </ion-card-content>
            </ion-card>
         </ion-scroll>
      </ion-item>
    <ion-row>

所以基本上，使用 *ngFor 的卡片滑块从数据库中获取数据。我看到在 ionic 4 中，ion-scroll 不再存在。

【问题讨论】：

你把它放在里面了吗？
是的，我输入了，但不起作用。

标签： ionic4

【解决方案1】：

感谢大家的支持。我找到了解决办法。

.thumnails{
  overflow-x: scroll;
  overflow-y: hidden;
  .list-thumbnail{
    height: 100%;
    white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
        width: 50px;
        height: 50px;
        margin:0 2px 0 0; 
        line-height: 60px;
     }
  }
}
::-webkit-scrollbar { 
  display: none; 
}

<div class="thumnails">
   <div class="list-thumbnail">
     <div class="img-thumb" [class.selected-img]="filter.selected" *ngFor="let filter of filters">
        <ion-card class="card card__full">
            <ion-card-header no-padding>
              <ion-img [src]="filter.url" style="width: 100%;" </ion-img>
                  </ion-card-header>

               <ion-card-content>
                  <p text-center>{{filter.name}}</p>
               </ion-card-content>
          </ion-card>
      </div>
   </div>
 </div>

【讨论】：

【解决方案2】：

.ts 文件

slides: any[];
  constructor(public navCtrl: NavController) {
      this.slides = [{
      title: 'Slide 1',
      content: 'Slide 1 content'
    },{
      title: 'Slide 2',
      content: 'Slide 2 content'
    },{
      title: 'Slide 3',
      content: 'Slide 3 content'
    },{
      title: 'Slide 4',
      content: 'Slide 4 content'
    }]
  }

你的文件.html

<ion-content padding>
  <ion-slides pager="true">
      <ion-slide *ngFor="let slide of slides">
        <h1>{{ slide.title}}</h1>
        <div style="display:block">
          {{ slide.content }}
        </div>
      </ion-slide>
    </ion-slides>
</ion-content>

试试这个解决方案，希望它能解决您的问题。请看看这个working url

【讨论】：