Горизонтальная прокрутка Ionic 4 с ngFor

Я в растерянности. Я могу заставить горизонтальную прокрутку работать нормально только с 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"
  },

css angular ionic-framework ngfor ionic4

29.01.2019 04:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

18 961

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Попробуйте использовать директиву для фактического элемента, который необходимо реплицировать:

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

это на самом деле дает мне горизонтально отображаемый список, что является шагом в правильном направлении! но список переносится на следующую строку вместо того, чтобы перемещаться за пределы экрана и прокручиваться.

— 29.01.2019 04:57

Неважно, это действительно так!! я прокомментировал "контейнер" css. Большое спасибо Сергей!

— 29.01.2019 05:00

29.01.2019 04:53

Использование флексбокса:

div[scrollx=true] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
     display: none;
  }
   .scroll-item {
     flex: 0 0 auto;
  }
}

https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

07.03.2019 19:49

Может, попробуй

<ion-segment scrollable = "true">
    <ion-segment-button value = "friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
</ion-segment>

Это должно быть решением, но на момент написания прокрутка работает только с Shift + прокрутка в режиме PWA, что очень неинтуитивно.

— 02.02.2020 21:03

03.01.2020 15:48