arrays - Angular ngFor连续显示两个项目

Question

我的代码遇到了问题。我正在尝试使用 ngFor 命令显示 4 x 8 网格。下面提供的是我的代码：

<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 列出现在我的表格中？

先感谢您。

标签： arraysangular

Answer 1

我做了 3 处更改

• 在第一个子 div 上，我删除了 *ngIf 条件
• 在第二个子 div 上，我将 word.Title 更改为 Words[i]
• 在第三个子 div 上，我将 *ngIf 更新为 Words[i+1] !== undefined
• 在第四个子 div 上，我将 word.Title 更改为 Words[i+1]

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