带有ngFor的Ionic 4水平滚动

Question

我不知所措。我可以只使用 html 和 css 来使水平滚动正常工作，但是当我引入 ngFor 时，它拒绝产生相同的效果。有没有人有这方面的经验，或者知道如何解决这个问题？

这是我不起作用的简单代码：

此示例生成一个垂直列表：

 <div class="container" *ngFor="let item of items | async">
        <div class="scroll" scrollX="true">
         <span>{{item.ProjectEvent}}</span>
        </div>
    </div>

这会产生一个水平滚动的宽容器

 <div class="container" >
        <div class="scroll" scrollX="true">
            <span>item1</span>
            <span>item2</span>
            <span>item3</span>
            <span>item4</span>
            <span>item5</span>
            <span>item6</span>
            <span>item7</span>
            <span>item8</span>
            <span>item9</span>
        </div>
    </div>

两者都使用相同的css：

 .container {
  width: 100px;
  background-color: green;
  overflow: hidden;
  white-space: nowrap;
  ::-webkit-scrollbar {
    display: none;
  }
  .scroll {
    overflow: auto;
  }
}

向我解释一下Spock先生！

我在这里先向您的帮助表示感谢！

良好度量的依赖项：

 "dependencies": {
    "@angular/common": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0",
    "@ionic/pro": "2.0.4",
    "core-js": "^2.5.4",
    "firebase": "^5.8.0",
    "ngx-navigation-with-data": "^1.0.2",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },

原文由 MacD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试在需要复制的实际元素上使用指令：

 <div class="container">
    <div class="scroll" scrollX="true">
        <span *ngFor="let item of items | async">{{item.ProjectEvent}}</span>
    </div>
</div>

原文由 Sergey Rudenko 发布，翻译遵循 CC BY-SA 4.0 许可协议