Angular of-if 改变跨度文本

Question

我有这个 JSON 文件，我正在从中获取对象作为产品。当显示产品的尺寸时，当 json 对象具有 "kids": "1".

时，我想将跨度从 "sizes:" 更改为 "kids:"

<div class="sizes-wrap">
        <span class="size-label"><span>sizes:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

此代码打印尺寸：以及来自 json 的尺寸，例如"128 厘米，140 厘米，152 厘米，164 厘米"

我想在 json 对象 "kids" 的值为 1 时将 html 中的单词 "sizes" 更改为 "kids"。

<div class="sizes-wrap">
        <span class="size-label"><span>kids:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

这是 json 个对象之一：

  "kids": "0",
  "name": "Product name",
  "sizes": "Small,Medium,Large,X-Large,XX-Large,3XL",
  "kid_adult": "0",
  "free_porto": "0",
  "price": "649,00",
  "package": "0",
  "delivery": "1-2 dage",
  "price_old": "0,00",
  "id": "133714",
  "women": "0"

毕竟这是我想要实现的：

<div class="sizes-wrap">
        <span ng-if="item.kids == 0 && item.kid_adult == 0 && item.women == 0" class="size-label"><span>sizes:</span></span>
        <span ng-if="item.kids == 1" class="size-label"><span>kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>adult kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>women:</span></span>
        <span class="sizes">{{ item.sizes }}</span>
    </div>

Answer 1

这应该适合你：

<div class="sizes-wrap">
    <span class="size-label">
        <span ng-if="item.kids == 0">sizes:</span>
        <span ng-if="item.kids == 1">kids:</span> 
    </span>
    <span class="sizes">{{ item.sizes }}</span>
</div>

Answer 2

 <span ng-if="data.kids === 1">kids:</span>
 <span ng-if="data.kids !== 1">sizes:</span>

也许，像这样，但最好用 json 发送单词并插入它，像这样：

<span class="size_word">{{data.size_word}}</span>

Answer 3

使用 javascript 表达式，在本例中使用三元运算符。

<span>
    {{ user.biography ? user.biography : 'Without information' }}
</span>

Answer 4

您可以使用 *ngIf; else 而不是使用多个 *ngIf。来自 Angular Docs v11 的示例：

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Angular of-if 改变跨度文本

Angular ng-if change span text

html

css

angularjs

angular-ng-if