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

Question

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

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

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

这里我想运行从 i = tasks.size 到 i < = 5 的循环。所以我在 UI 中总共有 5 行。如何实现？

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

Answer 1

你不需要在html中保留这个逻辑。在你 class 你可以做这样的事情：（假设你从服务器获取任务）

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

Answer 2

您可以遍历包含 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 3

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

for (let i = 0; i < 5; i++) {
  if(!this.tasks[i].id) {
    this.tasks[i].id = '';
  }
}

Answer 4

您还可以在

之后添加您需要的行数

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

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

How to assign a starting index value while using ngFor in angular

html

angular

ngfor