Как создать сетку с помощью угловых 5 - PullRequest
0 голосов
/ 12 сентября 2018

Как создать приведенную ниже сетку, используя угловую 5 и загрузочную сетку.Имена будут взяты из массива.

  1. Имя 1 Имя 4 Имя 7
  2. Имя 2 Имя 5 Имя 8
  3. Имя 3 Имя 6 Имя 9

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Вот скрипка , использующая скрытые и видимые классы для достижения желаемого результата.

Рабочий стол

<div class="col-md-6 col-lg-4">
  <div class="row">
  <div class="col-sm-12">Name 1</div>
  <div class="col-sm-12">Name 2</div>
  <div class="col-sm-12">Name 3</div>
  <div class="col-sm-12">Name 4</div>
  </div>
</div>
<div class="col-md-6 col-lg-4 hidden-md">
  <div class="row">
 <div class="col-sm-12">Name 5</div>
  <div class="col-sm-12">Name 6</div>
  <div class="col-sm-12">Name 7</div>
  <div class="col-sm-12">Name 8</div>
  </div>
</div>
0 голосов
/ 12 сентября 2018

Вы можете сделать это с row и col следующим образом:

<div class="row">
  <div class="col-4">Name 1</div>
  <div class="col-4">Name 2</div>
  <div class="col-4">Name 3</div>
</div>
<div class="row">
  <div class="col-4">Name 5</div>
  <div class="col-4">Name 6</div>
  <div class="col-4">Name 7</div>
</div>
<div class="row">
  <div class="col-4">Name 8</div>
  <div class="col-4">Name 9</div>
  <div class="col-4">Name 0</div>
</div>

или вы можете использовать ngFor таким образом

<div class="row">
  <div class="col-4" *ngFor="let user of Users">
    {{user.name}}
  </div>
</div>

Если вы хотитечтобы отображать 3 элемента в каждом столбце, вы должны изменить структуру Array на что-то вроде:

export Class User {
  public name1: string;
  public name2: string;
  public name3: string;
}

, тогда ваш User[] будет выглядеть так:

this.myUserList:User[] = [
  {
    name1 = "Mark",
    name2 = "John",
    name3 = "Matt",
  },
  {
    name1 = "Mark1",
    name2 = "John1",
    name3 = "Matt1",
  },
  {
    name1 = "Mark2",
    name2 = "John2",
    name3 = "Matt2",
  }  
];

наконец, ваша ngFor будетбыть таким

<div class="row">
    <div class="col-4" *ngFor="let user of Users">
        {{user.name1}}{{user.name2}}{{user.name3}}
    </div>
</div>
...