Angular2とRxJsで選択したアイテムを強調表示

Question

Observablesとasync pipeを使用するために、単純なAngular2ビューコンポーネントを書き直しています。結果のリストが表示され、選択された結果が強調表示されます。

私のコンポーネントは、以下の特性を有していた前に：

results: Result[] = []; 
selectedResult: Result = null; 

を、ビュー内のループは、このようなものに見えた：

：今、私は観測では、次のビューコンポーネントを持って

<div *ngFor="let r of results" [class.active]="r === selectedResult" /> 

を

@Component({ 
    moduleId: module.id, 
    selector: 'results-view', 
    templateUrl: 'results-view.component.html' 
}) 
export class ResultsViewComponent implements OnInit { 

    constructor(private resultService: ResultService, 
     private route: ActivatedRoute) { } 

    results: Observable<Result[]> = null; 
    selectedResult: Observable<Result> = null; 

    private selectRequests = new Subject<string>(); 

    ngOnInit(): void { 
     let deviceId = this.route.snapshot.params['deviceId'] 

     this.results = this.resultService.getResults(deviceId); 
     this.selectedResult = Observable.combineLatest(this.selectRequests.asObservable(), this.results, (sr, res) => { 
      return res.filter(r => r.resultId == sr)[0]; 
     });  
    } 

    selectResult(resultId: string): void { 
     this.selectRequests.next(resultId); 
    } 
} 

以下のビュー：

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>Alert</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let r of (results | async)" [class.active]="r === selectedResult"> 
      <td>{{r.Name}}</td> 
      <td> 
       <a href="javascript:void(0)" (click)="selectResult(r.resultId)"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

これは機能しません。私も角の表現を試しました

"r === (selectedResult | async)" 

でも動作しません。この唯一の問題は、getResultsメソッドがサーバーに対して複数回実行されたことです。

オブザーバブルによる選択処理の正しい方法は何ですか？

私はもうオブジェクト参照を比較していないよビューが、オブジェクトのIDS（文字列）の場合：

Answer 1

これは、今どのように動作するかです。

<tr *ngFor="let r of (results | async)" [class.active]="r?.resultId == (selectedResult | async)?.resultId"> 

これは、行ごとに新しいサブスクリプションが順番にgetResult()戻ってサーバーに原因が作成されていることを問題に私を残し：だからビューのループは、次のようになります。

私の最初の試みは、このように私に観察を変更することでした：

this.results = this.resultService.getResults(deviceId).share(); 

Funnilyこれはまだ戻っサーバー（なぜ???）を2回呼び出しを私に残しました。しかし、これはうまくいくようです：

this.results = this.resultService.getResults(deviceId).publishLast().refCount(); 

この解決策は、thisブログポストからインスピレーションを得ました。

Answer 2

同じ結果に対して、属性ディレクティブを使用することができます。ここにあなたを助けるリンクがあります。 https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#bindings

OnMouseEnter（）イベントではなく、OnClickイベントをキャッチするだけです。