如何在 Angular 中最好地动态 show/hide 字符串段？

Question

我正在构建一个模板，其中可能有也可能没有某些值；比方说，我需要基于来自 JSON 响应的多个字段构建一个 URL 字符串。

<a class="url">{{ ad.domain }}/{{ ad.path1 }}/{{ ad.path2 }}...</a>

但我正在考虑如果字符串的某些部分为空，如何处理这种情况；例如 path2 没有值。

我可以在锚标记内使用 ng-container 和 *ngIf 指令，但它最终看起来非常凌乱和臃肿：

<a class="url">{{ ad.domain }}<ng-container *ngIf="ad.path1 !== ''">/{{ ad.path1 }}</ng-container><ng-container *ngIf="ad.path2 !== ''">/{{ ad.path2 }}</ng-container>...</a>

它确实完成了工作，但我想知道是否还有其他 Angular 方式 可以有效地完成这项工作。

Answer 1

像这样使用三元运算符

<a class="url">{{ ad.domain+(ad.path1?'/'+ad.path1:'')+(ad.path2?'/'+ad.path2:'') }}</a>

如何在 Angular 中最好地动态 show/hide 字符串段？

How to best dynamically show/hide string segments in Angular?

html

angular-ng-if

angular