我有些不知所措。只使用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;
}
}
请向我解释一下,斯波克先生!
提前感谢您的帮助!
为了保险起见,这里是依赖关系:
"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"
},