Question

我创建了两个observable：

private sources$: Observable<Array<ISource>>;
private defaultSource$: Observable<ISource>;

我正在使用ngFor来获取所有ISource并将其渲染到表格中：

<tr *ngFor="let source of sources$ | async; let index = index;">
...

对于每个来源，我使用td标记创建多个列。其中一个：

<td>
    {{source.holdername}} <span class="tag tag-warning">DEFAULT</span>
</td>

如果当前span是source，我需要defaultSource$标记可见。

我猜我需要使用ngIf，但我无法弄清楚如何构建表达式。

有什么想法吗？

Answer 1

这很简单：

<td>
    {{source.holdername}} <span class="tag tag-warning" *ngIf="source === (defaultSource$ | async)">DEFAULT</span>
</td>

请注意defaultSource$发出的值应与source的对象引用相同。

Answer 2

如果有任何新的默认来源，您可以在OnInit方法中订阅defaultSource（使用ngOnInit lifehook）并将source保存在变量中：

private currentDefaultSource: ISource;

public OnInit(): void {
    this.defaultSource$.subscribe(
        data => this.currentDefaultSource = data,
        error => console.log(error)
    );
}

现在，您已订阅并保存了自动更新的默认来源。之后，您可以使用ngIf进行简单的比较。

<td>
    {{source.holdername}} <span *ngIf="source === currentDefaultSource" class="tag tag-warning">DEFAULT</span>
</td>

如果需要，可以在组件中创建功能并在那里进行检查。在HTML中：

<td>
    {{source.holdername}} <span *ngIf="isDefaultSource(source)" class="tag tag-warning">DEFAULT</span>
</td>

在你的组件中：

isDefaultSource(source: ISource): boolean {
   return this.currentDefaultSource === source
}

与可观察者合作

2 个答案: