自定义结构指令创建的元素太多

我创建了自定义结构指令,该指令应为传递的项数组中的每个元素呈现宿主元素:

@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 显示此问题。