时间戳

首页 > 解决方案 > *ngFor 仅打印数组的第一个元素

html - *ngFor 仅打印数组的第一个元素

问题描述

我正在使用这段代码：

   <div *ngIf="gamedata.notOver" class="columns">
                <div class="column has-text-centered" *ngFor="let board of boards; let i = index">
                    <table class="is-bordered" [style.opacity]="i == player ? 0.5 : 1">
                        <tr *ngFor="let row of board.tiles; let j = index">
                            <td *ngFor="let col of row; let k = index" (click)="boardListener($event)" [style.background-color]="col.used ? '' : 'transparent'" [class.win]="col.status == 'win'" [class.fail]="col.status !== 'win'" class="battleship-tile" id="t{{i}}{{j}}{{k}}">
                                {{ col.value == "1" ? (col.status == "hit" ? "" : "X") : (col.status == "miss" ? "⛶" : (col.status == "hit" ? "" : "")) }}
                            </td>
                        </tr>
                    </table>
                    <hr>
                </div>
   </div>

要打印包含 2 个元素的数组数组的第一个元素，我如何选择打印第一个或第二个元素而不打印它们？我需要这样做，因为我必须将它们放在单独的 div 中。

标签： htmlangular

解决方案

我假设引用数组数组的线是电路板之一。

尝试将每个数组包装在具有 ngIf 指令的 ng-content 中，如下所示：

<div class="column has-text-centered" *ngFor="let board of boards; let i = index">
    <ng-content *ngIf="i%2 == 0">
        INSERT WHAT YOU WANT TO DISPLAY FOR FIRST ARRAY ITEM HERE
    </ng-content>
    <ng-content *ngIf="i%2 != 0">
        INSERT WHAT YOU WANT TO DISPLAY FOR SECOND ARRAY ITEM HERE
    </ng-content>
</div>

您可能需要重复一些代码，但它应该可以工作。

推荐阅读