Пользовательская структурная директива создает слишком много элементов

Question

Я создал свою пользовательскую структурную директиву, которая должна отображать элемент host для каждого элемента в переданном массиве элементов:

@Directive({
  selector: '[appItems]'
})
export class ItemsDirective implements OnInit, OnChanges {

  @Input('appItemsOf')
  items: any[];

  constructor(private container: ViewContainerRef,
              private template: TemplateRef<any>) {
  }

  ngOnInit(): void {
    this.container.createEmbeddedView(this.template);
  }

  ngOnChanges(): void {
    this.container.clear();

    for (const item of this.items) {
      if (item) {
        this.container.createEmbeddedView(this.template, {
          $implicit: item,
          index: this.items.indexOf(item)
        });
      }
    }
  }
}

Использование:

<div *appItems="let item of items">
  Item: {{ item.name }}
</div>

Который, к сожалению, печатает:

Item: 1
Item: 2
Item: 3
Item:

Последний элемент создается и отображается, хотя массив элементов выглядит следующим образом:

items = [
    {
        name: '1'
    },
    {
        name: '2'
    },
    {
        name: '3'
    }
]

Я создал https://stackblitz.com/edit/angular-qwatck stackblitz, показывающий эту проблему.

Почему это так и как это должно быть сделано правильно?

Answer 1

В настоящее время сделано следующее:

1. Директива экземпляр создан
2. NgOnChanges вызывается
3. NgOnInit вызывается

Таким образом, в основном, когда вы создаете N-ракурсы для своей коллекции, вы создаете еще один во время NgOninit, в результате чего создается N+1 встроенных представлений в вашем шаблоне.

Просто удалите содержимое NgOnInit,

Answer 2

Почему вы создаете это в ngOnInitДостоевский это создает лишний. После комментирования этой строки лишний элемент исчезнет.

  ngOnInit(): void {
    // this.container.createEmbeddedView(this.template);
  }