角4分重複點擊GET HTTP觀察數據多次

-1

我有這樣的服務，這爲我提供了數據從API爲可觀察到的。在我的組件中，如果用戶雙擊get方法，數據將被多次推入到數組中。我對RxJs庫很新，但我有一種感覺，可以用.switchMap（）修復，使用BehaviorSubject或者使用|異步管道？「hitsArray」 - 數組，包含HTML中的數據作爲ngFor - 來自http get的responsedata，如果用戶通過「spam」函數將數據壓入數組超過1次反覆點擊。角4分重複點擊GET HTTP觀察數據多次

服務：

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功能「進料」調用：

<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>

來源

2017-10-18 byblix

有在提供的模板代碼'getStories'方法沒有呼叫固定。 – n00dl3

對不起，我不認爲這是必要的 - 功能正在被另一個函數調用。現在我已經包含了這個部分。 – byblix

對我來說這是除了你不使用計時器，但點擊爲[這一個]或多或少相同的問題（https://stackoverflow.com/questions/42657380/observable-polling/44110016#44110016）觸發請求。你可以創建一個處理點擊的主題，並用它代替'Observable.timer（5000）' – n00dl3

一個switchmap只能防止數據的回報，如果沒有數據尚未返回。你的代碼是完全正確的，並且做你所要做的事情：當用戶點擊時，你發送一個數據請求。你的問題很容易被排空hitsArray this.hitsArray = [];

來源

2017-10-18 09:36:20 Carsten

謝謝你 - 雖然我實際上做清空陣列，於網址參數被改變，從我的API數據仍然被推到hitsArray陣列，如果我垃圾郵件的GET請求。我錯過了什麼，還是有更好的方式來處理這個錯誤？如果需要，我可以提供完整的代碼。 – byblix

角4分重複點擊GET HTTP觀察數據多次

回答

相關問題