Question

我有此数据：

"commercialRanges": [
      {
        "rangeId": "700",
        "rangeName": "POSTPAID"
      },
      {
        "rangeId": "500",
        "rangeName": "PREPAID"
      },
    ]

在我的眼中，我想将rangeNames显示为一个连续的，连接的字符串，如下所示：POSTPAID,PREPAID

我尝试过这个：

      <div  *ngFor="let g of gammes.data.commercialRanges">
          {{g.rangeName}},
      </div>

但这导致了我这样的观点：（分隔的字符串）

FIXE,
POSTPAID,

错了，

建议？

Answer 1

您可以预处理组件中的数据并仅显示它：

this.rangeNames = games.data.commercialRanges.map(range => range.rangeName).join(",")

<div>{{ rangeNames }}</div>

Answer 2

您可以做几件事。您可以只使用join函数并显示结果。或者，您可以内联显示文本。

加入：

<div>
  {{games.data.commercialRanges.map(({rangeName}) => rangeName).join(', ')}},
</div>

内联：

<div>
  <span *ngFor="let g of gammes.data.commercialRanges">
    {{g.rangeName}},
  </span>
</div>

Answer 3

使用以下代码：

<span  *ngFor="let g of gammes.data.commercialRanges">
          {{g.rangeName}},
      </span>

div是块级元素。因此它将使用一个块。这就是为什么视图看起来像那样的原因。

您还可以像这样使用代码：

<div  *ngFor="let g of gammes.data.commercialRanges" style="display: inline-block">
          {{g.rangeName}},
      </div>

Answer 4

换行的原因是因为您使用的是div而不是跨度，因为div默认情况下不是内联的。

您不能仅显示

而不是使用for循环

{{gammes.data.commercialRanges.map(range => range.rangeName).join(", ")}}

这也意味着您最后没有获得额外的奖励

Angular：在对象上循环并合并为字符串

4 个答案: