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

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

22.03.2020 06:27:08 Просмотров 24 Источник

Я пытаюсь разделить список на части в зависимости от количества элементов в массиве. Если количество ингредиентов в массиве больше 6, то я хочу, чтобы список разделился на две части. Не могу понять, как я буду это делать! Я знаю, что есть свойство 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; */
}

Вот этот компонент.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);
      }
    );
  }
}
У вопроса есть решение - Посмотреть?

Ответы - Условное разбиение списка HTML на две части / Conditionally splitting a HTML list in two

Является ответом!
Naren Murali

22.03.2020 06:49:01

Вам нужно применить столбцы 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;
}

Пример штакблица

Закрыть X