Angular ng Для отображения двух элементов подряд

Question

У меня проблема с кодом. Я пытаюсь показать сетку 4 на 8 с помощью команды ngFor. Ниже приведен мой код:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="word == Words[i]" style="border: 1px solid black" cdkDrag>{{ word.Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+2 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="word == Words[i+1]" style="border: 1px solid black" cdkDrag>{{ word.Title }}</div>
                </div>

            </ng-container>
          </div> 

Проблема, с которой я столкнулся, заключается в том, что в сетке отображается слово word.Title в левом столбце, но в правом столбце отображается просто число ({{i + 2}}) текст и теперь содержание word.Title. См. Изображение ниже:

Как вы можете видеть столбец четных чисел, содержимое нового столбца не отображается.

Как мне получить 4 столбец, который появится в моей таблице?

Заранее спасибо.

Answer 1

Я внес 3 изменения

• В первом подразделе div я удалил условие * ngIf
• Во втором подразделе я изменил word.Title на Words [i]
• В третьем подразделе div я обновил * ngIf до Words [i + 1]! == undefined
• В четвертом подразделе я изменил word.Title на Words [i + 1]

{{i + 1}} {{Words [i] .Title}} {{i + 2}} {{Words [i + 1] .Title}}