0

Observables と async パイプを使用するように単純な 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メソッドがサーバーに対して複数回実行されたことです。

オブザーバブルで選択処理を行う正しい方法は何ですか?

4

2 に答える 2

0

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

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

于 2016-12-13T19:43:38.890 に答える
0

これが今の仕組みです：

ビューでは、オブジェクト参照を比較するのではなく、オブジェクトの ID (文字列) を比較しています。したがって、ビューのループは次のようになります。

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

これにより、すべての行に対して新しいサブスクリプションが作成されgetResult()、サーバーに戻るという問題が残りました。

私の最初の試みは、次のようにオブザーバブルを変更することでした:

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

おかしなことに、これでもサーバーへの 2 つの呼び出しが残っていました (なぜ???)。しかし、これはうまくいくようです：

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

このソリューションは、このブログ投稿に触発されました。

于 2016-12-13T18:39:12.567 に答える