Question

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

谢谢！

组件：

  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>

Answer 1

根据您的组件的模板，您正在使用data，它会针对订阅中此处可观察的每个新获取的数据进行更新

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

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

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

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

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
      }

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

P.S。当程序加载组件时，您的this.data.hits必须是数组，初始化为[]。您的观察结果中的data必须是数组，或者如果匹配的对象为数组，则请使用此代码{{1 }}

希望这有帮助。

Answer 2

所以这是最后的修复（注意：每次params更改时，hitsArray都会作为空数组加载）：

组件：

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>

非常感谢@Theophilus提出的建议！他的榜样可能适用于除我以外的大多数情况！

循环显示Observable数据，推送到数组，并显示数组打字稿的所有结果

2 个答案: