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 只创建了几个组件，而不是在向下滚动时重用它们。 这会导致以下（示例）场景：

1. 5 个app-post 组件列表，全部以displayInfo 为假
2. 点击第一个app-post组件集displayInfo为真
3. 3d 和 5th app-post 组件已将 displayInfo 设置为 是的

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

Answer 1

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

解决方案是将 displayInfo 布尔值作为项目模型的一部分引入。 Here 是为 TypeScript 项目解释的类似解决方案，但在基于 Angular 的项目中也可以使用相同的概念