内插角5条件

Question

UTQG

{{x？.a}} {{x？.b}} {{x？.c}}

你好，

这是现有代码。如果x？.a ===未定义x？.b ===未定义x？.c ===未定义，我想显示'N / A'。这三个都是字符串。如果其中任何一个具有值，它应该显示字符串的值。

这是我想到的一段代码

UTQG

{{x？.a ===未定义&& x？.b ===未定义&& x？.c ===未定义？ x？.a + x？.b + x？.c：'N / A'}}

但是在html上，当字段的值存在时显示NaN，而当所有值都未定义时显示N / A。

有人可以建议我在这里做错了吗。

Answer 1

由于您只想分别显示每个字符串，所以您要做的就是检查项目是否存在以及是否显示它，否则显示N/A。

{{x?.a ? x.a : 'N/A'}}

这只是检查x?.a是否具有真实值，如果存在，将显示该值。如果它的值是假的（例如undefined，null，''，0等），则它将显示N/A。如果您仍然真正希望它仅在N/A而不是其他伪造的值时显示undefined，则使用以下内容。

{{x?.a === undefined ? 'N/A' : x?.a}}

Answer 2

我会在这里输入ngIf else。当全部为N/A时显示带有undefined的元素，否则显示所有具有值的属性。像这样：

<p *ngIf="!x?.a && !x?.b && !x?.c; else elseTemplate">
  N/A
</p>

<ng-template #elseTemplate>
  <p>
    {{ x?.a }} {{ x?.b }} {{ x?.c }}
  </p>
</ng-template>

DEMO：STACKBLITZ