Angular7 / Ionic4 - Невозможно установить свойство 'header' из неопределенного

Question

Я получаю эту ошибку при использовании Angular CDK для использования виртуального списка. Ionic 4 имеет реализацию, но, как предложил Майк Хартингтон из Ionic, на данный момент стоит использовать Angular cdk , так что это то, что я сделал, и теперь я пытаюсь сделать это добавить функциональность заголовка, так как я пытаюсь показать список контактов и хотел бы, как выглядит список контактов: заголовок «А» и все люди с фамилиями, начинающимися с «А», находятся под. и т.п. вот HTML:

component.html

  <cdk-virtual-scroll-viewport
    class="scroll-viewport"
    #scroll
    [itemSize]="itemSize"
    minBufferPx="900"
    maxBufferPx="1350"
  >
    <ion-list>
      <ion-item-divider *ngIf="header?.length"> {{ header }} </ion-item-divider> <!-- ERROR HERE -->
      <ion-item *cdkVirtualFor="let contact of contactList; trackBy: trackByFn" (click)="openProfile(contact)">
        <ion-thumbnail slot="start" class="rounded">
          <img [src]="contact.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked"
          ><ion-text color="primary">
            <h4>{{ contact.lastNames }}, {{ contact.firstNames }}</h4></ion-text
          ></ion-label
        >
        <ion-label position="stacked"> {{ contact.specialty }}</ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>

component.ts

export class ContactsPage implements OnInit, OnDestroy {
  public contacts: Contact[];
  public header: string;

  constructor() {
    this.header = 'A';
  }

  public trackByFn(recordIndex: number, record: Contact): number {
    let i: string;
    const char = record.lastNames[0].toUpperCase().replace('À', 'A');
    if (char !== i) {
      i = record.lastNames[0];
      this.header = i;
    }
    return null;
  }

Я пробовал все способы определить его где прямо под trackByFn, говоря this.header = 'A', но все еще та же проблема. а также под объявлением класса, просто поместив public header = 'A';, чтобы посмотреть, будет ли он читать его в {{header}} части html. Но проблема та же самая, говоря, что она не определена. Я также попытался переместить размещение <ion-item-divider>, но все еще та же проблема.

спасибо за помощь!