使用 Angular2 和 RxJs 突出显示所选项目答案

【问题标题】：Highlight selected item with Angular2 and RxJs使用 Angular2 和 RxJs 突出显示所选项目
【发布时间】：2017-04-28 20:53:11
【问题描述】：

我正在重写一个简单的 Angular2 视图组件以使用 Observables 和异步管道。它显示了一个结果列表，并且有一个应突出显示的选定结果。

在我的组件具有以下属性之前：

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 方法对服务器执行了多次。

使用可观察对象进行选择处理的正确方法是什么？

【问题讨论】：

(selectedResult | async) 应该没问题，请注意，使用 === 您正在比较对象引用，但这些应该相同，因此请尝试仅打印 async 和 {{ selectedResult | async }} 的结果，看看会发生什么它确实

标签： angular rxjs rxjs5 angular2-observables

【解决方案1】：

现在是这样的：

在视图中，我不再比较对象引用，而是比较对象的 ID（字符串）。所以视图中的循环看起来像这样：

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

这给我留下了一个问题，即为每一行创建一个新订阅，这反过来又导致getResult() 返回服务器。

我的第一次尝试是像这样修改我的 observable：

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

有趣的是，这仍然给我留下了两个电话回服务器（为什么？？？）。但是这个似乎工作正常：

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

此解决方案的灵感来自 this 博客文章。

【讨论】：

【解决方案2】：

对于相同的结果，您可以使用属性指令。这是对您有帮助的链接。 https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#bindings

只捕获 OnClick 事件而不是 OnMouseEnter() 事件。

【讨论】：