Как назначить начальное значение индекса при использовании ngFor в angular

Question

У меня есть требование всегда отображать минимум 5 строк (5 или более строк) в таблице. Например, если в базе данных доступны 2 строки, мне нужно отобразить еще 3 строки в пользовательском интерфейсе с пустыми строками.

Вот то, что я пробовал до сих пор:

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

Здесь я хочу запустить l oop от i = tasks.size до i <= 5. Итак, у меня есть общее из 5 строк в UI. Как этого добиться? </p>

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

Answer 1

Вы можете l oop над массивом из 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

вы также можете добавить столько строк, сколько вам нужно, после

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

Не нужно хранить этот лог c в html. В своем классе вы можете сделать что-то вроде этого: (предположим, вы загружаете задачи с сервера)

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

Answer 4

Это можно было бы лучше обработать в контроллере. В случае стратегии обнаружения изменений по умолчанию, шаблон перезагружается несколько раз без нашего контроля или ведома. Поэтому лучше убедиться, что переменная tasks имеет как минимум 5 элементов в контроллере, чем управлять потоком в шаблоне. Вы можете сделать что-то вроде следующего в контроллере и оставить шаблон без изменений.

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