Ionic Virtual Scroll Long Label 未正确切断

Question

我正在更新一个使用 angular 的离子应用程序，其中包含属性个名称的列表视图和复选框。列表中可能有大约 1300 个项目。使用包含如此多项目的传统列表视图需要很长时间才能打开视图并初始化所有元素，但列表视图上的格式是正确的。如果名称太长，则在末尾用省略号将其删除。如下截图所示。

上面列表视图的代码如下：

<ion-content [fullscreen]="true" class="ion-padding-top">
<ion-list>
    <ion-item *ngFor="let property of observableProperties | async; let i = index" class="ion-no-padding">
        <ion-label>{{ property.name }}</ion-label>
        <ion-checkbox [(ngModel)]="property.isSelected" [id]="property.id" slot="end" (click)="propertySelected(property.id)"></ion-checkbox>
    </ion-item>
</ion-list>

离子标签没有应用 css，显示正确。

我决定使用本文档中概述的虚拟滚动：angular virtual scroll documentation

这解决了打开视图需要很长时间的问题，我得到了即时响应，但格式不适合长名称。长名称不会被截断，而是将元素扩展到屏幕之外，因此您必须水平滚动才能到达复选框。因为该元素在列表视图上重复使用，所以当您滚动到长名称附近时，它附近的所有元素也具有相同的长标签长度。下面的 gif 突出显示了这一点：

上面gif的代码是：

<ion-content [fullscreen]="true" class="ion-padding-top">
<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
<ion-list>
    <ion-item *cdkVirtualFor="let property of observableProperties | async" class="ion-no-padding">
        <ion-label fixed>{{ property.name }}</ion-label>
        <ion-checkbox [(ngModel)]="property.isSelected" [id]="property.id" slot="end" (click)="propertySelected(property.id)"></ion-checkbox>
    </ion-item>
</ion-list>
</cdk-virtual-scroll-viewport>

我尝试通过固定参数向元素中的离子标签添加格式，但这并没有改变任何东西。我也尝试将以下 css 添加到离子标签但没有任何改变。

ion-label {
margin: 0;
display: block;
overflow: clip;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: inherit;
text-overflow: ellipsis;
white-space: nowrap;

}

这并没有解决问题。我怎样才能使用虚拟滚动条，但仍将我的 ion-label 正确截断以适应屏幕大小的长文本？

Answer 1

在将 css 应用于此处发现溢出的元素时，cdk-virtual-scroll-viewport 存在一个已知错误 - https://github.com/angular/components/issues/24277 但是，如果像下面的示例那样将 angular pseudo-class ::ng-deep 应用于 .cdk-virtual-scroll-content-wrapper，它将允许您修改封装的视图 css 类

::ng-deep .cdk-virtual-scroll-content-wrapper { max-width: 100%;}

Ionic Virtual Scroll Long Label 未正确切断

Ionic Virtual Scroll Long Label is not cutting off correctly

ionic-framework

angular