cdk виртуальная прокрутка с таблицей HTML - PullRequest
Новая
       12

cdk виртуальная прокрутка с таблицей HTML

1 голос
/ 14 марта 2019

Я очень новичок в angular и застрял в этой проблеме уже более суток.Использование Angular 7 и angular / cdk ver 7.3.4.То, что я пытаюсь сделать, кажется очень простым.У меня есть старая добрая таблица HTML с большим количеством строк.Я хочу отобразить его на экране с включенной виртуальной прокруткой (используя cdk-virtual-scroll-viewport).Я следовал этому руководству, чтобы выполнить это:

https://www.thecodecampus.de/blog/virtual-scrolling-in-angular-7/

Я вижу, как это работает в stackblitz на их странице, но когда я пробую это в моей среде, ничего не происходит.Нет ошибок в отладчике Chrome, но на экране тоже ничего нет.Элемент h1 вверху отображается, но не сама таблица.Это полностью игнорируется.Чего мне здесь не хватает? Это правильный подход?

Спасибо за помощь:

вот мой компонент разметки: 

<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 { }

1 Ответ

0 голосов
/ 27 марта 2019

Я пренебрегал установкой высоты элемента cdk-virtual-scroll-viewport в файле css.Вот почему это не сработало: 

table {
  width: 100%;
}

cdk-virtual-scroll-viewport {
  height: 400px;
}

теперь работает с правильно установленной высотой.

...