Выражение изменилось после проверки - ngTemplateOutletContext

Question

Я использую angular v9. Я создаю компонент, а параметры - это список элементов и обратный вызов, в ngOnInit я вызываю группу функций и уменьшаю параметр элементов, и каждый элемент, я вызываю обратный вызов, и в своем приложении я просто возвращаю элемент я хочу сгруппироваться.

Некоторая часть кода:
HTML - Компонент

<div class="c-timeline">
  <div class="c-timeline__keys" *ngFor="let key of groupedKeys; let i = index">
    <div class="c-timeline__key">
      <ng-template [ngTemplateOutlet]="timelineKey" [ngTemplateOutletContext]="{key: key}"></ng-template>

      <div class="c-timeline__content-divider" *ngIf="i !== groupedKeys.length - 1">
        <div class="c-timeline__divider"></div>
      </div>
    </div>

    <div class="c-timeline__items">
      <div class="c-timeline__item" *ngFor="let item of groupedItems[key]">
        <ng-template [ngTemplateOutlet]="timelineValues" [ngTemplateOutletContext]="{item: item}"></ng-template>
      </div>
    </div>
  </div>
</div>

Машинопись - Компонент

  @Input() public items: any[];
  @Input() public groupBy: Function;

  public groupedItems: any;
  public groupedKeys: string[];

  @ContentChild('timelineKey', {static: false}) timelineKey: TemplateRef<any>;
  @ContentChild('timelineValues', {static: false}) timelineValues: TemplateRef<any>;

  constructor() {
  }

  ngOnInit(): void {
    this.groupedItems = this.group();
    this.groupedKeys = Object.keys(this.groupedItems);
  }

  private group(): any {
    return this.items.reduce((acc, item, index) => {
      const key = this.groupBy({item, index});

      if (key in acc) {
        acc[key].push(item);
      } else {
        acc[key] = [item];
      }

      return acc;
    }, {});
  }

И мое использование компонента:
HTML - Использование компонента

<my-component [items]="items" [groupBy]="groupBy">
  <ng-template let-key="key" #timelineKey>
    <h4>{{ key }}</h4>

    <ng-template let-item="item" #timelineValues>
      {{ item.name}}
    </ng-template>
  </ng-template>
</my-component>

Машинопись - Использование компонентов

  public items: { name: string; id: number }[] = [
    {
      id: 1,
      name: 'Foo (id = 1)'
    },
    {
      id: 1,
      name: 'Banana Test (id = 1)'
    },
    {
      id: 2,
      name: 'Apple Test (id = 2)'
    },
    {
      id: 3,
      name: 'Lemon Test (id = 3)'
    },
    {
      id: 4,
      name: 'Grape Test (id = 4)'
    },
  ];

  public groupBy({item, index}): number {
    return item.id;
  }

Итак, я получил эту ошибку при запуске своего компонента

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.

Мое ожидание - работа без ошибок, потому что компонент работает очень хорошо, но есть эта ошибка... Я уже пытаюсь изменить на static: true в @ContentChild и создать embedViews, но не работает..