Question

您好实际上是在应用程序中实现virtuall滚动 Offers.html

 <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-virtual-scroll [items]="places">
          <ion-item-sliding *virtualItem="let place" #slideItem>

            <ion-item>

              <ion-label>{{place.title}}</ion-label>
            </ion-item>

          </ion-item-sliding>


        </ion-virtual-scroll>
      </ion-col>

    </ion-row>
  </ion-grid>

Offers.ts

export class OffersPage implements OnInit, AfterViewInit {
  places = []
  testSub = new Subject
  constructor(private placeService: PlacesService, private router: Router) { }

  ngOnInit() {

    this.places = this.placeService.getPlaces()
    setTimeout(() => {
      this.testSub.next({title : 'test'})
    },5000)

  }
 ngAfterViewInit() {
    this.testSub.subscribe(data => {
      this.places.push(data)
    })
  }

}

在这里您可以看到我设置了一个新主题，并在5秒钟后发射了一个新对象并将其推入 Places 数组，但是这里的问题是在virtualscroll帮助中无法获取更新的placearray。 / p>

Answer 1

刚遇到同样的问题，给 ion-virtual-scroll 添加一个 id

<ion-virtual-scroll [items]="clients" #listedLoadedPlacesScroll approxFooterHeight="400px">

然后在 viewChild 上调用它

@ViewChild('listedLoadedPlacesScroll') listedLoadedPlacesScroll: IonVirtualScroll;

在服务中创建一个主题，并在构造函数上订阅它

this.webService.updatedDataClients.subscribe((data: any) => {
      this.listedLoadedPlacesScroll.checkEnd();
    })

差不多就是这样。

Answer 2

非常简单，就按照@miloth 的做法做，让我为您简化代码

<块引用>

第一步

添加一个 ID #listedLoadedPlacesScroll 如下代码行

   <ion-virtual-scroll [items]="places"  #listedLoadedPlacesScroll >

<块引用>

步骤 2

获取 .ts 文件中 ID 的引用，如下面的代码行

@ViewChild('listedLoadedPlacesScroll')listedLoadedPlacesScroll: IonVirtualScroll;

<块引用>

第三步

然后在执行您的操作之后，在推送项目之后通过调用刷新它的列表

 this.listedLoadedPlacesScroll.checkEnd();

新项目推到数组时，离子虚拟滚动不更新

2 个答案: