Разделить данные *ngFor на 2 столбца

У меня есть этот HTML:

<div class = "w-full flex justify-center">
  <div *ngFor = "let item of items" class = "flex w-1/2">
    <span>{{item.label}}</span>
    <span>{{item.value}}</span>
  </div>
</div>

Таким образом, HTML в пользовательском интерфейсе отображается как:

LABEL 1 - VALUE 1 | LABEL 2 - VALUE 2
LABEL 3 - VALUE 3 | LABEL 4 - VALUE 4
LABEL 5 - VALUE 5 | LABEL 6 - VALUE 6

Мне нужно отобразить данные следующим образом:

LABEL 1 - VALUE 1 | LABEL 4 - VALUE 4
LABEL 2 - VALUE 2 | LABEL 5 - VALUE 5
LABEL 3 - VALUE 3 | LABEL 6 - VALUE 6

Я пытался найти рабочее решение, но безуспешно. Можете ли вы предложить рабочее решение?

ты пробовал flex-column?

— 29.04.2024 15:03

что ты пробовал? и что не сработало в решении, которое вы попробовали?

— 29.04.2024 15:07

Является ли ваш массив элементов статическим или динамическим, может ли он содержать более 6 элементов?

— 29.04.2024 15:09

Возьмите данные и разделите их пополам. Сохраните одну половину в переменную a, а другую половину в переменную b. Затем переберите каждую переменную независимо.

— 29.04.2024 15:58

angular flexbox tailwind-css ngfor

29.04.2024 14:36

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

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

Ответы 2

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

Разбейте массив items пополам.

chunkedItems: any[][] = [];

let halfIndex = Math.floor(this.items.length / 2);
this.chunkedItems = [
  this.items.slice(0, halfIndex),
  this.items.slice(halfIndex, this.items.length),
  ];
}

И структурируйте гибкие контейнеры, как показано ниже:

<div class = "w-full flex flex-wrap justify-center">
  <ng-container *ngFor = "let chunks of chunkedItems; let i = index">
    <div class = "flex flex-col w-1/2">
      <div *ngFor = "let item of chunks" class = "flex">
        <span>{{item.label}}</span> -
        <span>{{item.value}}</span>
      </div>
    </div>
  </ng-container>
</div>

Демо @ StackBlitz

Просто примечание: floor добавит больше элементов во второй столбец, а ceil добавит больше элементов в первый столбец, если элементов нечетное.

— 29.04.2024 16:37

29.04.2024 16:03

Попробуйте этот код

{{item.label}} - {{item.value}} {{item.label}} - {{item.value}}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  items = [
    { label: 'LABEL 1', value: 'VALUE 1' },
    { label: 'LABEL 2', value: 'VALUE 2' },
    { label: 'LABEL 3', value: 'VALUE 3' },
    { label: 'LABEL 4', value: 'VALUE 4' },
    { label: 'LABEL 5', value: 'VALUE 5' },
    { label: 'LABEL 6', value: 'VALUE 6' }
  ];

  firstColumnItems() {
    return this.items.filter((item, index) => index % 3 === 0 || index % 3 === 1);
  }

  secondColumnItems() {
    return this.items.filter((item, index) => index % 3 === 2);
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div class = "w-full flex justify-center">
   
    <div class = "w-1/2" *ngFor = "let item of firstColumnItems()">
        <span>{{item.label}}</span> - <span>{{item.value}}</span>
    </div>
  
    <div class = "w-1/2" *ngFor = "let item of secondColumnItems()">
        <span>{{item.label}}</span> - <span>{{item.value}}</span>
    </div>
</div>

29.04.2024 16:36

Другие вопросы по теме

Отключить сжатие элементов сетки

Почему гибкий дочерний элемент не сжимается на этой простой веб-странице тестового примера?

Как сохранить соотношение сторон 1:1 для дочернего элемента холста?

Как добавить границу между двумя гибкими элементами?

Динамический макет CSS для мегаменю, которое читается строками или столбцами в зависимости от количества пунктов меню

Переполнение гибкого элемента в направлении главной оси

Как я могу повторить первые элементы при переносе в гибком макете?

Могу ли я с помощью CSS эффективно достичь максимальной ширины = 100% и максимальной высоты = 100% без родительского элемента, имеющего явную/фиксированную ширину и высоту, альтернативный подход?

Как принудительно выполнить действия справа от горизонтальной карты Vue3 Quasar

CSS-дисплей гибкого пространства между не работает

Разделить данные *ngFor на 2 столбца

Ответы 2

Другие вопросы по теме

Похожие вопросы