使用 HTML table 的 cdk 虚拟滚动
cdk Virtual Scrolling with HTML table
我是 angular 的新手,现在已经被这个问题困了一天多了。使用 Angular 7 和 angular/cdk 版本 7.3.4。我想要完成的事情看起来很简单。我有一个很好的旧 HTML table 有很多行。我想在启用虚拟滚动的屏幕上显示它(使用 cdk-virtual-scroll-viewport)。我按照本教程完成了此操作:
https://www.thecodecampus.de/blog/virtual-scrolling-in-angular-7/
我在他们的页面上看到它在 stackblitz 中工作,但是当我在我的环境中尝试时,什么也没有。 chrome 调试器中没有错误,但屏幕上也没有任何错误。顶部的 h1 元素出现了,但 table 本身没有出现。它被完全忽略了。我错过了什么 here.Is 这是正确的方法吗?
感谢帮助:
这是我的组件标记:
<h1>CRD component</h1>
<cdk-virtual-scroll-viewport [itemSize]="20">
<table>
<thead>
<tr>
<td>Name</td>
<td>ID</td>
</tr>
</thead>
<tbody>
<tr *cdkVirtualFor="let row of tableData">
<td>{{row.name}}</td>
<td>{{row.id}}</td>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
这里是组件代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-crd',
templateUrl: './crd.component.html',
styleUrls: ['./crd.component.css']
})
export class CrdComponent implements OnInit {
name = 'Angular';
tableData = [];
constructor() { }
ngOnInit() {
for (let i = 0; i < 1000; i++) {
this.tableData.push({
name: 'Name ${i}',
id: i
});
}
}
}
最后,我像这样更新了应用程序模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UnitListComponent } from './Unit/unit-list.component';
import { CrdComponent } from './crd/crd.component';
@NgModule({
declarations: [
AppComponent,
UnitListComponent,
CrdComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
ScrollingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我忽略了在 css 文件中设置 cdk-virtual-scroll-viewport 元素高度。这就是它不起作用的原因:
table {
width: 100%;
}
cdk-virtual-scroll-viewport {
height: 400px;
}
现在可以正确设置高度。
我是 angular 的新手,现在已经被这个问题困了一天多了。使用 Angular 7 和 angular/cdk 版本 7.3.4。我想要完成的事情看起来很简单。我有一个很好的旧 HTML table 有很多行。我想在启用虚拟滚动的屏幕上显示它(使用 cdk-virtual-scroll-viewport)。我按照本教程完成了此操作:
https://www.thecodecampus.de/blog/virtual-scrolling-in-angular-7/
我在他们的页面上看到它在 stackblitz 中工作,但是当我在我的环境中尝试时,什么也没有。 chrome 调试器中没有错误,但屏幕上也没有任何错误。顶部的 h1 元素出现了,但 table 本身没有出现。它被完全忽略了。我错过了什么 here.Is 这是正确的方法吗?
感谢帮助:
这是我的组件标记:
<h1>CRD component</h1>
<cdk-virtual-scroll-viewport [itemSize]="20">
<table>
<thead>
<tr>
<td>Name</td>
<td>ID</td>
</tr>
</thead>
<tbody>
<tr *cdkVirtualFor="let row of tableData">
<td>{{row.name}}</td>
<td>{{row.id}}</td>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
这里是组件代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-crd',
templateUrl: './crd.component.html',
styleUrls: ['./crd.component.css']
})
export class CrdComponent implements OnInit {
name = 'Angular';
tableData = [];
constructor() { }
ngOnInit() {
for (let i = 0; i < 1000; i++) {
this.tableData.push({
name: 'Name ${i}',
id: i
});
}
}
}
最后,我像这样更新了应用程序模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UnitListComponent } from './Unit/unit-list.component';
import { CrdComponent } from './crd/crd.component';
@NgModule({
declarations: [
AppComponent,
UnitListComponent,
CrdComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
ScrollingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我忽略了在 css 文件中设置 cdk-virtual-scroll-viewport 元素高度。这就是它不起作用的原因:
table {
width: 100%;
}
cdk-virtual-scroll-viewport {
height: 400px;
}
现在可以正确设置高度。