Блог

Главная - Вопросы по программированию - Как создать новую строку начальной загрузки для двух элементов в Angular?

Как создать новую строку начальной загрузки для двух элементов в Angular?

#javascript #html #angular #typescript #ngfor

#javascript #HTML #angular #typescript #ngfor

Вопрос:

Я хотел бы добавить строку для каждых 2 элементов цикла ngFor.Но я не смог с этим справиться. У меня есть массив имен студентов, как показано ниже

 studentNames=[
    {
    name:"Jonas",
    age:22,
    number:"1234"
  },
      {
    name:"Mathilda",
    age:25,
    number:"5432"
  },
      {
    name:"Jacob",
    age:20,
    number:"4321"
  },
      {
    name:"Ivan",
    age:23,
    number:"6984"
  },
      {
    name:"Kate",
    age:21,
    number:"3432"
  },
      {
    name:"James",
    age:20,
    number:"4312"
  },
      {
    name:"Sean",
    age:23,
    number:"4321"
  },
      {
    name:"Julia",
    age:23,
    number:"4321"
  },
  ]

Вот что я пробовал

 <ng-container *ngFor="let item of studentNames;let i=index">
  <div class="row" *ngIf="i%2==0">
    <div class="col md-12">
      {{item.name}}
    </div>
  </div>
</ng-container>

Это пропускается только тогда, когда индекс не равен.
Вот как я хочу видеть их ниже (порядок не имеет значения, только должно быть 2 на 2 в строке).

введите описание изображения здесь

Пример Stackblitz:https://stackblitz.com/edit/bootstrap-wpfukz?file=app/app.component.html

Ответ №1:

Это немного более «хакерский» подход, но только для HTML:

 <ng-container *ngFor="let item of studentNames;let i=index">
    <div *ngIf="i%2==0">
        <div class="row">
            <div class="col md-12">
                {{studentNames[i].name}}
            </div>
            <div class="col md-12">
                {{studentNames[i   1].name}}
            </div>
        </div>
    </div>
</ng-container>

Комментарии:

1. Странно, у меня это сработало в stackblitz, позвольте мне проверить еще раз

2. Да, это работает, похоже, что в моем соединении что-то не ладилось. Большое вам спасибо

Ответ №2:

Вы можете попробовать, как показано ниже. Используйте *ngFor экспортированное значение index и используйте половину длины массива для продолжения цикла

 <ng-container *ngFor="let item of studentNames; let j = index;">
  <ng-container *ngIf="j < (studentNames.length / 2)">
    <div class="row">
      <div class="col md-6">
        {{item.name}}
      </div>
      <div class="col md-6">
        {{ studentNames[ j   (studentNames.length / 2) ].name }}
      </div>
    </div>
  </ng-container>
</ng-container>

Работает stackblitz

Примечание : длина массива должна быть четным числом 😉