Angular：循环对象并连接成字符串答案

【问题标题】：Angular : loop over object and concatinate into a stringAngular：循环对象并连接成字符串
【发布时间】：2019-03-09 23:05:37
【问题描述】：

我有这个数据：

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

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

我已经试过了：

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

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

FIXE,
POSTPAID,

哪里不对，

建议？

【问题讨论】：

可能是css问题，比如内联显示
如果你已经修复了数据，为什么不干脆不用循环呢？ <div>{{gammes.commercialRanges[0].rangeName}}, {{gammes.commercialRanges[1].rangeName}}</div>

标签： html angular angular2-directives ngfor

【解决方案1】：

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

加入：

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

内联：

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

【讨论】：

您好，以上代码在所有记录上分开还是仅在 rangeName 归档？
是的，对不起。我错过了它是一组对象。已更新。

【解决方案2】：

使用以下代码：

<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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

换行的原因是因为你使用的是div而不是span，因为div默认不是内联的。

不用for循环，能不能不只显示

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

这也应该意味着你最后不会得到额外的 ,

【讨论】：

这不是显示[object Object],[object Object]吗？
对不起，是的，你是对的。您需要像上面其他人一样使用地图。我现在已经改变了