角材料滚动不显示答案

【问题标题】：angular material scrolling not showing up角材料滚动不显示
【发布时间】：2019-06-24 15:34:40
【问题描述】：

我正在尝试使用角度材质滚动。

这是我的代码：

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
import {ScrollingModule} from '@angular/cdk/scrolling';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ScrollDispatchModule,
    ScrollingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts：

从'@angular/core'导入{组件}；

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = Array.from({length: 10}).map((_, i) => `Item #${i}`);
}

app.component.html：

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
        <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

但滚动条确实出现了。我错过了什么吗？我安装了 angular material 和 cdk，在我的 package.json 中检查了所有这些。应该工作。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

解决了，我们认为CSS文件就是解决方案。我之前没有包含 CSS 文件。

这是我的 app.component.css 文件：

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }

  .example-item {
    height: 50px;
  }

【讨论】：