CDK虚拟滚动条未显示

Question

我正在尝试从《星球大战》 api获取结果列表，然后将结果逐一推入数组。我可以获取结果，但是在尝试使用虚拟滚动条时无法显示结果。有人知道为什么吗？

private rootUrl = 'https://swapi.co/api/';

getCategoryListing(name: string, page: number): Promise<any> {
    return this.http.get<any>(this.rootUrl + name + '?page=' + page + '&' + this.format)
      .toPromise();
  }

async getListings(name: string) {
    do {
      await this.starwarsService.getCategoryListing(this.name, this.page)
        .then(categorylistings => {
          this.categorylistings.push(categorylistings);
          categorylistings.results.forEach(element => {
            this.results.push(element);
          });
        })
        .catch(error => {
          console.error('>>error: ', error);
        });
      this.page += 1;
    }
    while (this.categorylistings[this.categorylistings.length - 1]['next'] !== null);
  }

<cdk-virtual-scroll-viewport itemSize="100">
  <div class="listitems" *cdkVirtualFor="let categorylisting of results; let i = index" >
  
    {{ categorylisting['name'] | async }}
   
  </div>
</cdk-virtual-scroll-viewport>