Как цикл ngFor работает с вложенными компонентами и их контекстами?

Question

Цель

Разрешить удаление элементов списка, их перемещение вверх и вниз после рендеринга с помощью цикла ngFor.

Проблема

Перемещение и удаление выполняется правильно насписок.Но после перемещения элемента вверх, ngFor дает странные результаты: перемещаемый элемент все еще находится на своем месте и также копируется в нужную позицию, в то время как элемент в этой позиции не отображается (но все равно все хорошо в самом списке).

Кроме того, после операции удаления угловые броски:

TypeError: Невозможно прочитать свойство 'destroy' из null в ViewContainerRef_.move ....

ПеремещениеРабота с элементами работает должным образом (все операции со списками выполняются методом array.splice).

О шаблонах списков

Цикл с оберткой вокруг элемента элемента списка:

  <ng-container *ngFor="let item of list; let itemIndex = index; trackBy: trackByItemId">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: { item: item, index: itemIndex, service: listOperationsService} }"></ng-container>
  </ng-container>

  <ng-template #itemTemplate
               let-data>
    <app-list-item [item]="data.item"
                       [service]="data.service"
                       [index]="data.index">
    </app-list-item>
  </ng-template>

Шаблон компонента элемента списка:

<div class="item">
    <app-item-content [model]="item"></app-item-content>
    <button (click)="service.moveUp(index)">Move up</button>
    <button (click)="service.moveDown(index)">Move down</button>
    <button (click)="service.delete(index)">Delete</button>
<div>

То, что я пробовал

1. Когда я предоставляю trackBy функцию, которая возвращает рендеринг простого элемента index, ngForсписок правильно.Но когда trackBy возвращает item.id или я вообще не предоставляю trackBy функции, возникает описанная проблема.
2. Насколько я знаю по Angular, я предположил, что все внутри ng-template изолировано от другихэкземпляры в других ng-template с и уничтожаются до тех пор, пока в списке нет соответствующего элемента.Поэтому я завернул app-list-item с ng-template.

Вопрос

Почему ngFor дублирует элемент при его перемещении вверх и не удаляет элемент, если он уже удален из списка, и выдает ошибку?

Я думаю, проблема где-то во вложении компонентов и контекстах.Оцените ваши идеи.

---

Обновление : все работало нормально, когда список отображался без вложенных компонентов, то есть только с ng-container s, ng-template s и простым html.Я решил использовать вложенные компоненты по причинам рефакторинга.