Условное разбиение списка HTML на две части

Question

Я пытаюсь разбить список на в зависимости от количества элементов в массиве. Если количество ингредиентов в массиве больше 6, то я хочу, чтобы список разделился на две части. Не могу понять, как я мог бы go сделать это! Я знаю, что есть свойство CSS, которое позволяет разбить список на два, но при этом была проблема с форматированием, и я хочу разделить список, только если он достигает дна контейнера (то есть 6 элементов). ).

Вот соответствующий html код:

<ul class="Ingredients-list">
        <li class="Ingredients-list-item"
        *ngFor="let Ingredient of selectedRecipe.ingredients">
        {{ Ingredient.name }} - {{ Ingredient.amount }}
    </li>
    </ul>

Вот соответствующий CSS код:

 .Ingredients-list-item {
    position: relative;
    list-style-type: none;
    left: 10px;
    top: 15px;
    font-size: 80%;
    /* columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2; */
}

Вот это Component.ts файл:

import { Component, OnInit } from '@angular/core';
import { Recipeservice } from '../recipes/recipes.service'
import { Recipe } from '../recipes/recipes.model';

@Component({
  selector: 'app-recipe-view',
  templateUrl: './recipe-view.component.html',
  styleUrls: ['./recipe-view.component.css'],
})
export class RecipeViewComponent implements OnInit {
  selectedRecipe: Recipe;

  constructor(private recipeService: Recipeservice) { }

  ngOnInit() {
    this.recipeService.RecipeSelected.subscribe(
      (recipe: Recipe) => {
        this.selectedRecipe = recipe;
        console.log(this.selectedRecipe);
      }
    );
  }
}

Answer 1

Вам нужно применить столбцы CSS к тегу ul вместо тега li. Ниже приведен рабочий пример. Надеюсь, что это относится к вашей проблеме!

Также нам нужно добавить класс, если список больше 6.

<ul class="Ingredients-list" [ngClass]="{'greater': recipes.length > 5}">
    <li class="Ingredients-list-item" *ngFor="let Ingredient of recipes">
        {{ Ingredient.name }} - {{ Ingredient.amount }}
    </li>
</ul>

CSS будет выглядеть следующим образом:

 .Ingredients-list-item {
    position: relative;
    list-style-type: none;
    font-size: 80%;
}
 .Ingredients-list.greater{  
  columns: 2;
  height:140px;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Пример Stackblitz