Nativescript listview 禁用组件重用

Question

我有一个 ListView 自定义组件接收一个布尔值 @Input() 属性，它负责显示模板的某些部分。

这是 ListView :

<ListView [items]="photos">
    <ng-template let-item="item">
        <app-post [photo]="item" [displayInfo]="display"></app-post>
    </ng-template>
</ListView>

display 变量设置为 false。

这是 app-post 模板：

<StackLayout *ngIf="displayInfo" verticalAlignment="center">
....            
</StackLayout>

其中 displayInfo 是输入属性。在 app-post 组件内部，我有将 displayInfo 值更改为 true 的逻辑。但是我注意到 ListView 只创建了几个组件，而不是在向下滚动时重用它们。这会导致以下（示例）场景：

包含 5 个 app-post 个组件的列表，全部 displayInfo 为 false
单击第一个 app-post 组件将 displayInfo 设置为真
3d 和第 5 个 app-post 组件已经 displayInfo 设置为真

如何避免这种行为，并使所有带有属性的自定义组件设置为列表视图中指定的值？

Answer 1

NativeScript ListView 是虚拟化的，并且正在对其单元格使用回收，这导致了您的问题，因为您期望自定义组件与列表中最初创建的一样，而实际上，它们是列表单元格的一部分被重复使用。

解决方案是引入 displayInfo 布尔值作为项目模型的一部分。 Here 是针对 TypeScript 项目解释的类似解决方案，但可以在基于 Angular 的项目

中使用完全相同的概念

Nativescript listview 禁用组件重用

Nativescript listview disable components reusing

nativescript

angular2-nativescript