2016-11-12 18 views
1

検索結果に重複する値を取り除く必要があります。 簡単な解決策を見つけるのを手伝ってください。検索結果に重複する値を取り除く/ angular2/typescript/js

買い手-search.service.ts

export class BuyerSearchService { 
    constructor(private http: Http) {} 
    search(term: string, atrib: string): Observable<Buyer[]> { 
     return this.http 
      .get(`app/buyers/?${atrib}=${term}`) 
      .map((r: Response) => r.json().data as Buyer[]); 
    } 
} 

買い手-search.component.ts

export class BuyerSearchComponent implements OnInit { 

    buyers: Observable<Buyer[]>; 
    private searchTerms = new Subject<string>(); 
    constructor(
     private buyerSearchService: BuyerSearchService,   
     private router: Router) {} 
    // Push a search term into the observable stream. 
    search(term: string): void { 
     this.searchTerms.next(term);  
    } 

    ngOnInit(): void { 
     this.buyers = this.searchTerms 
      .debounceTime(300)  // wait for 300ms pause in events 
      .distinctUntilChanged() // ignore if next search term is same as previous 
      .switchMap(term => term // switch to new observable each time 
       // return the http search observable 
       ? this.buyerSearchService.search(term, 'clientName') 
       // or the observable of empty buyers if no search term 
       : Observable.of<Buyer[]>([])) 
      .catch(error => { 
       // TODO: real error handling 
       console.log(error); 
       return Observable.of<Buyer[]>([]); 
      }); 
    } 
} 

とビュー、の購入者search.component.html

<div id="search-component"> 
    <input #searchBox id="search-box" (keyup)="search(searchBox.value)"/> 
    <div id="buyerByNameResults"> 
     <div *ngFor="let buyer of buyers | async" 
       class="search-result"> 
      <p class="buyer-name-s">{{buyer.clientName}}</p> 
     </div> 
    </div> 
</div> 

enter image description here

+0

データ)買い手が[]としては;'型指定されたオブジェクトの配列を生成しません。それでもオブジェクトリテラルのみを返します。 **型アサーションは型キャストではありません**。つまり、これらのオブジェクトではすべてのクラスメソッド/プロパティアクセサが使用できなくなります。 – Fiddles

答えて

0

は、おそらくあなたは、内側の観察可能に().distinctを実行し、最初のパラメータにキーセレクタを渡す必要があります。

this.buyerSearchService 
    .search(term, 'clientName') 
    .distinct(function (x) { return x.clientName; }); 

必要に応じて、比較者を指定できる2番目のパラメータがあります。あなたは `r.json()ことに注意しなければならない

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinct.md

関連する問題