Angular2使用不同的http.get

Question

我想了解更多有關Http.Get的信息。 我正在使用json文件來模擬HTTP調用。 在調用之后，我想將行限制為唯一狀態。 我知道有一個名為distinct的Rxjs命令（ Rxjs上的幫助不同 ）。 但是我不明白distinct的語法。 當我按原樣運行此代碼時，我得到一組狀態。 然而，當我添加區別時，它仍然具有像德克薩斯州這樣的重復狀態。

    public getStates(): Observable<IState[]> {
    return this._http.get(this.stateUrl)
      .map((res: Response) => <IState[]>res.json())
      // distinct by state name
       .distinct((x) => return x.state)
     ;
  }    

這是IState的界面

export interface IState {
  id: number;
  state: string;
  city: string;
  name: string;
}

試圖只獲取具有唯一狀態的行。

我有這個Github項目代碼的repo

Answer 1

IState是一個對象。 你必須定義究竟是什么使它們彼此不同 。你可以看一下文檔 ，有一種方法可以定義使對象與眾不同的原因

例如：

/* Without key selector */
var source = Rx.Observable.of(42, 24, 42, 24)
  .distinct();

var subscription = source.subscribe(
  function (x) {
    console.log('Next: %s', x);
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });

// => Next: 42
// => Next: 24
// => Completed

/* With key selector */
var source = Rx.Observable.of({value: 42}, {value: 24}, {value: 42}, {value: 24})
    .distinct(function (x) { return x.value; });

var subscription = source.subscribe(
  function (x) {
    console.log('Next: %s', x);
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });

// => Next: { value: 42 }
// => Next: { value: 24 }
// => Completed

Answer 2

在這種情況下，你有點混淆不同的含義！ 這個distinct的意思是過濾來自Observable的響應，而不是其內容！ 在這里，您嘗試“區分”（過濾）您的json對象，但distinct將過濾Observable“已解決”的響應（多個）。 因此，如果可觀察的“多次”解析相同的響應，那么由於你的.distinct ，你只會收到一次。 這意味着，如果第一次Observable返回一個json（例如[{0：a，1：b，2：c}]）並且第二次他返回相同的json響應，那么你的“訂閱者”將不會接收它兩次，因為.distinct將“過濾”它，因此它不會被觸發！

更多詳細信息： https ： //github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinct.md

所以，你正在尋找的是如何在你的json中“過濾”重復的結果。 答案很簡單：使用循環檢查其屬性/值或某些庫（如下划線）可能已經實現了此方法。

Answer 3

問題是當你調用.distinct((x) => return x.state) ， x變量是來自https://github.com/ATXGearHead12/distinct/blob/master/src/api/的整個數組。 state.json 。 然后屬性x.state不存在。

因此，您需要在數組中的每個項目上調用distinct，而不是在數組本身上。

例如，如下所示：

this._http.get(this.stateUrl)
    .map((res: Response) => <IState[]>res.json())
    .concatMap(arr => 
        Observable.from(arr).distinct((x) => return x.state)
    )
    .toArray(); // collect all items into an array