Angular 4重复点击多次获取http可观察数据答案

【问题标题】：Angular 4 repeating click get http observable data multiple timesAngular 4重复点击多次获取http可观察数据
【发布时间】：2018-03-30 03:17:12
【问题描述】：

我有这项服务，它为我提供来自 API 的数据作为 Observable。在我的组件中，如果用户双击 get 方法，数据会被多次推送到数组中。我对 RxJs 库很陌生，但我有一种感觉，可以使用 .switchMap()、使用 BehaviorSubject 或使用 | 来修复它。异步管道？

“hitsArray”-array 是包含 HTML 中作为 ngFor 的数据的内容——来自 http get 的响应数据被推送到数组中超过 1 次，如果用户通过重复“垃圾邮件”函数点击。

服务：

  getStories(page: string, hits: string, feed: string): Observable<any> {
    return this.getToken()
      .flatMap(idToken => {
        let headers = new Headers();
        headers.set('user_token', idToken);
        let params = new URLSearchParams();
        params.set('page', page)
        params.set('hits', hits)
        params.set('feed', feed)
        return this.http
          .get(`${this.apiUrl}/stories`, { params: params, headers: headers })
          .map((res: Response) => {
            //console.log(response);
            console.log("params: " + params);
            const data = res.json();
            return data;
          });
      })
      .catch(this.handleError);
  }

组件：

private getStories(page, hits, feed) {
    feed = this.feed;
    this.storiesService.getStories(this.page, this.hits, this.feed)
      .subscribe(
      (data) => {
        console.log(data);
        if (!data || data.hits == 0 || data.hits < 6) {
          this.finished = true;
          console.log("No more hits :(")
        } else {
          this.finished = false;
          for (let story of data.hits) {
            this.hitsArray.push(story);
            console.log("Feed me!")
          }
        }
      })
    console.log("side: " + this.page)
  }

  getInitialFeed(feed) {
    this.hitsArray.length = 0;
    this.page = 0;
    this.feed = feed;
    this.data = [];
    this.getStories(0, this.feed, '6');
  }

  onScroll() {
    console.log("Scrolling!")
    this.scrollStories()
  }

  private scrollStories() {
    this.page++; //SCROLLING
    if (this.page > 0) {
      console.log(this.page)
      this.getStories(this.page, this.hits, this.feed);
    }
  }

HTML ngFor 循环：

<div class="col-xs col-sm col-md-4 col-lg-4" *ngFor="let story of hitsArray" (click)="getSpecificStory(story)">

HTML 函数“feed”调用：

  <a routerLink="/discover/curated" routerLinkActive="active" (click)="getInitialFeed('curated')">Curated</a>
  <a routerLink="/discover/trending" routerLinkActive="active" (click)="getInitialFeed('trending')">Trending</a>
  <a routerLink="/discover/latest" routerLinkActive="active" (click)="getInitialFeed('latest')">Latest</a>

【问题讨论】：

在提供的模板代码中没有调用getStories方法。
对不起，我认为没有必要 - 该函数正在被另一个函数调用。我现在已经包含了那部分。
对我来说，这与this one 或多或少是相同的问题，只是您不使用计时器而是单击来触发请求。您可以创建一个处理点击的主题，并使用它而不是Observable.timer(5000)
这个答案对你有帮助吗？
我正在阅读它并尝试一些东西 atm。我会在 10 分钟内回复你。谢谢！

标签： angular http typescript rxjs observable

【解决方案1】：

switchmap 只能防止数据返回如果尚未返回数据。您的代码完全没问题，并且按照您的要求执行：当用户点击时，您发送数据请求。清空 hitsArray this.hitsArray = [];

即可轻松解决您的问题

【讨论】：

谢谢 - 虽然我确实清空了数组，但在更改 url 参数后，如果我向 get-request 发送垃圾邮件，我的 API 中的数据仍会被推送到 hitsArray-array。我错过了什么，还是有更好的方法来处理这个错误？如果需要，我可以提供完整的代码。