*ngFor 仅打印数组的第一个元素答案

【问题标题】：*ngFor to print only the first element of an array*ngFor 仅打印数组的第一个元素
【发布时间】：2018-11-20 11:40:43
【问题描述】：

我正在使用此代码：

   <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 中。

【问题讨论】：

splice element from ngFor angular2的可能重复
（不要用 Angular 编写游戏，因为这个框架是一个虚拟 DOM）。
如果你只有两个项目，为什么不把它分开，不把它当作一个数组呢？
@JacopoSciampi 断章取义，你可以用 Angular 编写几款游戏，只要它们不是 Skyrim 的大小......
断章取义？真正的？有很多理由不直接将 jQuery 与 angular 一起使用，canvas 和其他原生元素也是如此。

标签： html angular

【解决方案1】：

我假设指向数组数组的行是板子板之一。

尝试将每个数组包装在具有 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>

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

【讨论】：