Angular 在 html 中显示条件文本，包括条件数据

Question

我知道在 Angular2+ 中我们可以像这样在 html 中创建条件：

  <p>{{ dynamicData.value? dynamicData.value : dynamicData.default}}</p>

我们也可以这样做：

  <p>{{ dynamicData.value? 'text 1' : 'text 2'}}</p>

但是我想结合这两个解决方案，但我不知道该怎么做。一般来说，我想做这样的事情：

  <p>{{ dynamicData.value? 'Dynamic data value is equal: {{dynamicData.value}}' : 'no dynamic data'</p>

你知道如何处理这个文本插值吗？

Answer 1

<p *ngIf = "dynamicData.value"> 'Dynamic data value is equal' {{dynamicData.value}} </p>
<p *ngIf = "!dynamicData.value"> 'no dynamic data' </p>

Answer 2

您可以在 .ts 文件中使用变量，也可以使用 + 插值法 'Dynamic data value is equal: ' + dynamicData.default.

但我更喜欢 FedMice 发布的更多答案 ;)

Answer 3

您不需要在插值中使用插值，您已经可以访问变量并可以尝试以下操作：

<p>{{ dynamicData?.value ? ('Dynamic data value is equal: ' + dynamicData?.value) : 'no dynamic data'}}</p>

Answer 4

我希望这能奏效。

 <p>{{ dynamicData.value ? (`Dynamic data value is equal: ${dynamicData?.value}`) : `no dynamic data`}}</p>

Angular display conditional text in html including conditional data