Question

我遇到的问题是，ngx-virtual-scroller不会在我的角度应用程序的弹出菜单中显示数据。从技术上讲，它是在打开弹出窗口之前放入DOM的，但是没有显示出来。这是复制它的示例代码：

父母：

app.component.ts

export class AppComponent  {
  data$: Observable<{name: string}[]> = of([
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    }
  ]);
}

app.component.html

<hello [data$]="data$"></hello>

孩子：

hello.component.html

export class HelloComponent implements OnInit, OnDestroy {
  @Input() data$: Observable<{name: string}[]>;
  viewData: {name: string}[];
  destroyed$ = new Subject();

  @ViewChild(PerfectScrollbarDirective) scroll: PerfectScrollbarDirective;
  @ViewChild(VirtualScrollerComponent) virtualScroller: VirtualScrollerComponent;

  ngOnInit() {
      this.data$
        .pipe(
          takeUntil(this.destroyed$),
          filter(data => !!data)
        )
        .subscribe((data) => {
            this.scroll.update();
        });
  }

  ngOnDestroy() {
      this.destroyed$.next();
  }
}

hello.component.html

<div>
  <button placement="bottom-left"
        [ngbPopover]="popContent">
        Popover
  </button>
</div>

<ng-template #popContent>
    <header>Data length is: {{(data$ | async).length}}</header>
    <virtual-scroller [items]="data$ | async"
        perfectScrollbar
        (vsUpdate)="viewData = $event">
        <div *ngFor="let item of viewData">
            <a href>{{ item.name }}</a>
        </div>
    </virtual-scroller>
</ng-template>

我已经在stackblitz上创建了一个示例：here，您会看到一个问题。另外，我在控制台中遇到了一个错误，该错误在真正的应用程序Cannot read property 'update' of undefined中不会出现。数据到来时，滚动似乎没有更新其高度。

我该如何解决？

Angular ngx-virtual-scroller将不会在弹出窗口中显示项目

0 个答案: