循环显示Observable数据，推送到数组，并显示数组打字稿的所有结果 [英] Loop through Observable data, push to array, and display all results from array typescript

问题描述

如何遍历我的数据，我订阅了Observable，将其推送到数组，并显示数组的整个数据？
我现在的代码只显示每个页面的数据，而不是所有页面。
我想要这样做的原因是因为我想制作一个无限滚动。

How do i loop through my data, that i subscribed to as an Observable, push it to an array, and displaying the whole data of the array? My present code only displays data from each "page", and not all the pages. The reason why i want to do this, is because i want to make an infinity scroll.

谢谢！

组件：

  this.storiesService.getData(this.page, this.hits, this.feed)
  .subscribe(
  (data) => {
    console.log(data);
    if (!data || data.hits === 0) {
      this.finished = true;
      console.log("NO MORE HITS")
    } else {
      this.finished = false;
      for (let story of data.hits) {
        this.hitsArray.push(story);
        console.log("Hit me!")
        console.log(this.hitsArray);
      }
    }
  })

HTML：

 <div class="col-4 col-md-4 col-sm-12" *ngFor="let story of hitsArray">
  <div class="thumbnail">
    <img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" />
    <img *ngIf="story.storyMediaType === 'video'" class="img-fluid" src="{{story.storyThumbnailImage}}" width="150" height="94" />
    <div class="caption">
      <p>{{story.storyCity}}, {{story.storyCountry}}</p>
      <h3>{{story.storyHeadline}}</h3>
      <p>Uploadet {{story.uploadDate}}</p>
      <p>Bruger: {{story.userDisplayName}}</p>
      <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
</div>

推荐答案

根据您组件的模板，您正在使用 data 更新为订阅中可观察的每个新获取的数据

Based on your component's template, you are using data which is updated for every newly fetched data from observable here in your subscription

for (let story in data) {
        this.data = data; --> here you update regularly

从上面你要说的每个数组键更新我们的 this.data 这似乎是错误的，因为数组中的键是0,1,2这是索引。

from the above you are saying for every array key update our this.data which seems wrong, because the keys in an array is 0,1,2 which are the index.

for..of 和 for..in 语句都会迭代列表;迭代的值是不同的，for..in返回正在迭代的对象上的键列表，而for..of返回正在迭代的对象的数值属性的值列表。 readmore

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated. readmore

因此，处理检索数据处理的订阅代码应该看起来像下面那个，而不是长途旅行

So instead of the long trip your subscription code that handles the processing of the retrieved data should look like the one below

for (let story of data) { // now of
       // this.data = data; not needed else your data is always overriden
       // for (let i = 0; i < this.data.length; i++) { no need for this again since the above for..of is handling it
          this.hitsArray.push(story);
          this.data.hits.push(story);// add the new stories(as last element) to the main data array using this.data here now

          console.log(this.hitsArray);
      //  } for loop of this.data.length
      }

所以使用上面的代码后面的注释应该解释代码正在做什么以及不相关的部分如何导致数据覆盖。

So with the above code following the comments should explain what the code is doing and how the irrelevant parts are causing data override.

PS 您的 this.data.hits 必须是数组在程序加载组件时初始化为 [] 。您的observable中的数据必须是数组，或者匹配的对象必须是数组然后使用此代码代替（让data.hits中的故事）{。

P.S. your this.data.hits must be an array initialized as [] when the program is loading the component. And your data from your observable must be an array or if object with hits as array then use this code instead for (let story in data.hits) {.

希望这有帮助。

这篇关于循环显示Observable数据，推送到数组，并显示数组打字稿的所有结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！