angular - 使用 *ngFor 时的两列项目符号列表

Question

这是我得到的。该程序打印出英雄的单列项目符号列表。当程序在数组上循环时，我希望这个列表出现在我的两列列表中。

像这样的东西：

         Windstorm        Bombasto
         Magneta          Tornado
         Storm            Basto
         Magnet           Thorn
         Batman

src/app/app.component.html

        <p>Heroes:</p>
          <ul>
            <li *ngFor="let hero of heroes">
              {{ hero }}
            </li>
          </ul>

src/app/app.component.ts

    export class AppComponent {
      title = 'Tour of Heroes';
      heroes = [
        new Hero(1, 'Windstorm'),
        new Hero(8, 'Bombasto'),
        new Hero(9, 'Magneta'),
        new Hero(12, 'Tornado'),
        new Hero(18, 'Batman'),
        new Hero(28, 'Robin'),
        new Hero(35, 'Star')
      ];
      myHero = this.heroes[0];
    }

这是程序现在打印的内容

    Heroes:
     List item

        Windstorm
        Bombasto
        Magneta
        Tornado
        Storm
        Basto
        Magnet
        Thorn
        Batman 

我希望这个列表出现在两个项目符号列中，我只是不知道该怎么做

标签： angularhtml-listsngfor

Answer 1

你可以用它column-count来实现，只需给你的ul类，如下所示：

src/app/app.component.html

<p>Heroes:</p>
  <ul class="hero-column">
    <li *ngFor="let hero of heroes">
      {{ hero }}
    </li>
  </ul>

src/app/app.component.scss

.hero-column {
 column-count:2 
}