Список с двумя столбцами при использовании * ngFor - PullRequest
Новая
       10

Список с двумя столбцами при использовании * ngFor

0 голосов
/ 07 ноября 2018

Вот что я получил. Программа распечатывает список героев в одну колонку. Я хочу, чтобы этот список был представлен в списке из двух столбцов, когда программа зацикливается на массиве.

Примерно так: 

         Windstorm        Bombasto
         Magneta          Tornado
         Storm            Basto
         Magnet           Thorn
         Batman

ЦСИ / приложение / app.component.html 

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

ЦСИ / приложение / 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

Я хочу, чтобы этот список был представлен в двух колонках, я просто не могу понять, как это сделать

...