Angular: зацикливание на объекте и соединение в строку

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

Причина разрыва строки заключается в том, что вы используете div, а не span, поскольку div по умолчанию не являются встроенными.

Вместо использования цикла for вы можете не просто отображать

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

Это также должно означать, что вы не получите дополнительно, в конце

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

Answer 3

Вы можете предварительно обработать данные в вашем компоненте и просто отобразить это:

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

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

Answer 4

Есть пара вещей, которые вы могли бы сделать.Вы можете просто использовать функцию join и отобразить результат.Или вы можете отобразить текст в строке.

Регистрация:

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

Встроенная:

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