Angular Nativescript Listview在IOS上的不同行为

我正在使用Nativscript ui listview，RadListView组件。在列表中，我显示了我自己构建的小部件。在Android上没有问题，只要我打开列表，它们都会被加载并显示。但在IOS上，在我滚动过它们之后会加载一些内容，然后再滚动回它们，而有些内容根本不会显示。左图为Android，右图为IOS。该列表显示了三个小部件，一个图表小部件，一个地图和一个带数字的小部件。如何让它们在IOS上显示

@组件({
选择器：“应用程序新列表”，
templateUrl:'./newwidgets list.component.html'，
样式URL:['./newwidgets list.component.css']，
changeDetection:ChangeDetectionStrategy.OnPush，
moduleId:module.id，
})
导出类NewListComponent实现OnInit{
公共标题：字符串='Widgets'；
公共widgetsListSubscription=新订阅；
公共小部件$：ObservableArray；
公共_sourceDataItems:observearray；
public _sourceDataItems2:observearray；
公共处理$=新行为主体（true）；
公共列表视图：RadListView；
公共布局：ListViewLinearLayout；
构造函数（公共页：第页，
专用只读存储：存储）{
这是initData（）；
}
ngOnInit（）：void{
this.widgets$=newobservearray（）；
}
public get dataItems（）：observearray{
返回此。\u sourceDataItems2；
}
私有initData（）：void{
这._sourceDataItems=newobservearray（）；
const data=this.store.pipe(
选择（getDisplayedWidgets），
映射（idmap=>Object.values（idmap））
);
订阅（list=>this.\u sourceDataItems.push（list））；
this.\u sourceDataItems2=this.\u sourceDataItems；
}
}

---

在iOS中，ListView应该有一个预定义的大小，否则它将不会占用任何空间或导致一些副作用，因为iOS U | X中的设计不支持动态行大小。我之前就遇到过此类问题。为行模板中的项目提供高度为我解决了这些问题

<ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical" height="250">
        <GridLayout columns="auto" height="250">
          <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
        </GridLayout>
      </StackLayout>
</ng-template>

确保在

应用程序小部件选取器
组件中也指定了高度

另外，是的，我注意到您正在使用
ListViewLinearLayout
，但这并不能解决问题。
在iOS中，ListView应该有一个预定义的大小，否则它将不会占用任何空间或导致一些副作用，因为iOS U | X中的设计不支持动态行大小。我之前就遇到过此类问题。为行模板中的项目提供高度为我解决了这些问题

<ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical" height="250">
        <GridLayout columns="auto" height="250">
          <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
        </GridLayout>
      </StackLayout>
</ng-template>



确保在
应用程序小部件选取器
组件中也指定了高度

是的，我注意到您正在使用
ListViewLinearLayout
，但这并不能解决问题。
所以我尝试了很多不同的方法来解决这个问题，最后我找到了一个适用于android和ios的方法。它可能不像ListView那样内置了所有新奇的东西，但它在两种平台上都运行良好。当可观察对象获得新数据并且没有ui故障时，它会更新ui

解决方案是只使用ScrollView和ngFor来显示列表项。我只尝试了少量的列表项（10-20），加载速度非常快


所以我尝试了很多不同的方法来解决这个问题，最后我找到了一个适用于android和ios的方法。它可能不像ListView那样内置了所有新奇的东西，但它在两种平台上都运行良好。当可观察对象获得新数据并且没有ui故障时，它会更新ui

解决方案是只使用ScrollView和ngFor来显示列表项。我只尝试了少量的列表项（10-20），加载速度非常快


我的数据在运行时没有显示在Android上。我按照@Narendra所说的做了，并在ngOnChanges函数中执行了相应的代码

ngOnChanges(){
    if (this.item.profilePhoto === undefined) this.setAnonimProfilePhoto();
    if (!this.item.isOnline) this.userOfflineFromNow();
    this.getCityName();
}

@纳伦德拉，谢谢你。
我的数据没有在Android上显示。我按照@Narendra所说的做了，并在ngOnChanges函数中执行了相应的代码

ngOnChanges(){
    if (this.item.profilePhoto === undefined) this.setAnonimProfilePhoto();
    if (!this.item.isOnline) this.userOfflineFromNow();
    this.getCityName();
}

@Narendra非常感谢。
你能分享一个完整的游乐场示例，在那里可以重现这个问题吗？我使用了一个中继器而不是listview绕过了这种问题。如果这种方法对您有效，那么在iOS上中继器的可预测性要高得多。我可以在角度项目中使用中继器吗？您可以分享一个完整的游乐场示例，在那里可以重现问题吗？我通过使用中继器而不是listview绕过了这种问题。如果这种方法对你有效，中继器在iOS上更容易预测。我可以在角度项目中使用中继器吗？谢谢你的回答，我在你的示例中得到了更好的结果，但我已经将RadListView更改为ListView。但是ListView似乎不会自动用新数据更新我的小部件。如果我从“图表”窗口小部件中滚动并返回到它，它只是加载，但什么也没有发生。列表中的其他项目在滚动时加载并消失。不是一个非常一致的行为。如果是角度行为，那么使用ngOnChanges解决了问题。我应该在更改时刷新listview吗？将行项目作为组件并刷新NgonChange上的数据外观我不知道如何做？有一个游乐场或一个很好的例子吗？谢谢你的回复，我用你的例子得到了一个更好的结果，但是我把RadListView改成了ListView。但是ListView似乎不会自动用新数据更新我的小部件。而我