0

我正在重写一个简单的 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方法对服务器执行了多次。

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

4

2 回答 2

0

这就是它现在的工作方式：

在视图中，我不再比较对象引用，而是比较对象的 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();

这个解决方案的灵感来自这篇博文。

于 2016-12-13T18:39:12.567 回答
0

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

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

于 2016-12-13T19:43:38.890 回答