Angular7 / Ionic4-无法设置未定义的属性“标题”

Question

当使用Angular cdk使用虚拟列表时，我一直收到此错误。 Ionic 4有一个实现，但是，正如Ionic的Mike Hartington所建议的那样，现在要使用Angular cdk，这就是我已经完成的工作，现在我想要做的就是添加标头功能我试图显示一个联系人列表，并希望显示一个联系人列表：“ A”的标题和所有以“ A”开头的姓氏的人。等等 这是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';放在html的{{header}}部分中即可查看它。但是，问题是相同的说法，即未定义。我还尝试过移动<ion-item-divider>的位置，但仍然是相同的问题。

感谢您的帮助！