如果 *ngIf 与锚标记一起使用，为什么 Angular 不生成 href？

Question

有人可以解释为什么下面的代码没有生成 link 并向我解释如何正确执行此操作吗？已创建并显示，但 href 留空。我猜这与生成 link 的顺序与验证表达式的时间有关。

<a *ngIf="(profile$ | async)?.twitter" href="{{ (profile$ | async)?.twitter }}">Twitter Link</a>

where (profile$ | async)?.twitter = "https://twitter.com/..."

Answer 1

如果 profile$ 是冷可观察对象，每个 async 管道将触发单独的响应操作。您可以尝试将管道包裹在 ng-container 中以重用该值。

<ng-container *ngIf="(profile$ | async) as profile">
  <a [href]="profile?.twitter">Twitter Link</a>
</ng-container>

Answer 2

每个异步订阅相同的 this.profile$。也许您的 observable 已经完成了第二次订阅。试试这个代码来防止它：

<a *ngIf="(profile$ | async)?.twitter as twitterHref" [href]="twitterHref">Twitter Link</a>

Why doesn't Angular generate the href if *ngIf is used with an anchor tag?