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

【问题标题】：How to assign a starting index value while using ngFor in angular如何在角度中使用ngFor时分配起始索引值
【发布时间】：2020-05-26 03:02:47
【问题描述】：

我要求在表格中始终显示至少 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

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

【问题讨论】：

就像 Alex 提到的那样，最简单的方法是确保 taks 数组存在 5 个元素。像这样： let tasks= ['task 1', 'task 2', 'task 3'];任务 = 任务长度 tasks.length >= i ? tasks[i] : null) : tasks;
您是否从 API 获取数据？如果是这样，您是否可以控制 API？如果是这样，您可以轻松地在 API 中执行此操作。如果没有，这可以在打字稿中完成。
API 是什么意思？我正在从公开的后端 REST 服务中获取值。

标签： html angular ngfor

【解决方案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 以获取演示。

【讨论】：

这更接近我想要的。但是，通过这种方式，我可以在 UI 中获得最多 5 个元素。我的要求是任何时候都应该在 UI 中显示至少 5 个元素。但是，此列表可以从后端增长，并且项目将在表格中滚动。

【解决方案2】：

你也可以在后面添加很多你需要的行

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

【讨论】：

【解决方案3】：

您不需要将此逻辑保留在 html 中。在你的课堂上，你可以这样做：（假设你从服务器获取任务）

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

【讨论】：

this.tasks = tasks.length tasks.length >= i ? tasks[i] : {id: 'empty'}) : tasks;

【解决方案4】：

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

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

【讨论】：