如何在角度中使用ngFor时分配起始索引值

Question

我必须始终在一个表中至少显示5行（5行或更多行）。例如，如果数据库中有2行可用，我需要在UI中用空行显示另外3行。

这是我到目前为止尝试过的：

<div *ngFor="let task of tasks; let i = index">
    <div class="rowDiv">{{task.id}}</div>
</div>

这里我想从i = task.size到i <= 5运行循环。因此，我在UI中总共有5行。如何实现呢？

<div *ngFor=" let i = index">
    <div class="rowDiv"></div>
</div>

Answer 1

您可以遍历5个项目的数组，使用*ngIf检查每个索引的现有数据是否存在，并在需要时显示其他行：

<div *ngFor="let task of tasks">
  <div class="rowDiv">{{task.id}}</div>
</div>
<ng-container *ngFor="let i of [0,1,2,3,4]">
  <div *ngIf="!tasks[i]">
    <div class="rowDiv">This row is empty</div>
  </div>
</ng-container>

请参见this stackblitz以获取演示。

Answer 2

您无需将此逻辑保留在html中。在您的课程中，您可以执行以下操作：（假设您从服务器获取任务）

this.getTasks().subscribe((tasks) => {
   const emptyTasks = Array(5).fill({id: 'empty'});
   this.tasks = tasks.map((t, index) => t || emptyTasks[index]);
})

Answer 3

您还可以在之后添加这么多行]

  <table>
    <row *ngFor="let task in task">
    </row>
    <!--if task.length<5-->
    <ng-container *ngIf="tasks.length<5">
    <!-use slice:0:5-tasks.length-->
    <row *ngFor="let i of [0,1,2,3,4] |slice:0:5-tasks.length">
    </row>
    </ng-container>
  </table>

Answer 4

这可以在控制器中更好地处理。如果使用默认更改检测策略，则在我们无法控制或不知情的情况下，将模板重新加载多次。因此，最好确保tasks变量在控制器中具有至少5个元素，而不是控制模板中的流。您可以在控制器中执行以下操作，并保持模板不变。