angular - CdkVirtualFor 不渲染任何东西

Question

我正在尝试在我的聊天应用程序中使用 cdk-virtual-viewpoint。可悲的是，它没有渲染任何东西。当我尝试使用普通的“ngfor”时，它工作正常。但是当我使用 cdkVirtualfor 时，它不会显示任何内容。请参阅下面的代码以获取更多详细信息。

chatbox.component.ts---

<cdk-virtual-scroll-viewport itemSize="100" class = "cdk">
          <div *cdkVirtualFor="let item of chat_history" class="chat-data">
            <ul>
             <li class = "me">{{item.message}}</li>
            </ul>
          </div>
</cdk-virtual-scroll-viewport>

app.module.ts------

@NgModule({
  declarations: [AppComponent, ChatboxComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, ScrollingModule],
  providers: [{provide: APP_BASE_HREF, useValue: '/consumer/'}],
  bootstrap: [AppComponent],
})

chatboxcomponent.css-----
.form-container .chat-data {
  height: 100px;
}


.form-container .cdk {
  height: 500px;
}

请让我知道我做对了什么。相信我，但聊天记录确实有数据。我已经检查过了。