0

我的角度应用程序中有以下情况。

案子 ：

我有一个自定义输入select，它基本上做了一些样式和逻辑，并绘制了一个输入列表：

（简化）：

<app-select>
    <app-option
    *ngFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
</app-select>

在应用程序选择模板中我只是做

<div>
 <ng-content></ng-content>
</div>

简单的前：https ://stackblitz.com/edit/angular-pwdm7r?file=src/app/app.component.ts

问题 ：

现在，我想*ngFor用最少的代码做一个几乎可以滚动的东西。

一种方法是每次我想使用虚拟滚动时都这样做。

<app-select>
  <cdk-virtual-scroll-viewport>
    <app-option
    *cdkVirtualFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
  </cdk-virtual-scroll-viewport>
</app-select>

但我试图做的解决方案是cdk-virtual-scroll-viewport在我的选择器组件中写一个

<div>
  <cdk-virtual-scroll-viewport>
     <ng-content></ng-content>
  </cdk-virtual-scroll-viewport>
</div>

像这样 => https://stackblitz.com/edit/angular-fuw1fu?file=src/app/app.component.html

NullInjectorError：没有 CdkVirtualScrollViewport 的提供者！

因此，我尝试ng-content仅在存在 cdkVirtualFor 时阅读并附加内容。

https://stackblitz.com/edit/angular-ax3yvu?file=src/app/select/select.component.ts

但我一直收到同样的错误。

有没有办法做到这一点？

4

0 回答 0