有条件地将HTML列表一分为二

我试图根据数组中元素的数量将列表拆分为多个元素。如果数组中的成分数大于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>

以下是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);
      }
    );
  }
}

---

您需要在

ul

标记上应用CSS列，而不是

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，我认为顶部和左侧位置的css会弄乱对齐，您可以删除它们

<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>

 .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;
}