以列表项显示逗号分隔值： [英] Display comma separated values as list items:

问题描述

这是这个问题的延续：如何以逗号分隔的JSON值显示为列表？

我有这个数组：

  var艺术家：Artist [] = [
 {
name：Barot Bellingham，
shortname：Barot_Bellingham，
 知名：皇家绘画和雕塑学院，
bio：一些生物在这里......，
朋友：[
james，
harry，
bob
] 
}，
 //等等... 
] 
  

我需要将朋友显示为有序列表。我是这样做的：

 < li * ngFor =let friend of artist.friends> {{朋友}}< /锂> 
  

这很好，但，我现在需要重构我的数据没有嵌套数组：

  var艺术家：Artist [] = [
 {
name ：Barot Bellingham，
短名：Barot_Bellingham，
知名：皇家绘画和雕塑学院，
bio：这里有些生物.. 。，
friends：James，Harry，Bob
} 
  

如何继续将每个朋友显示为单独的列表项目，例如：

 < ol> 
< li>詹姆斯< / li> 
< li> Harry< / li> 
< li>鲍勃< / li> 
< / ol> 
  

谢谢！

解决方案只需使用 toString（）方法显示用逗号分隔的字符串列表。

var friends = ['a'，'b'，'c' ]; console.log（friends.toString（））;

所以在你的情况下，你可以改变它：

 < li * ngFor =let friend of artist.friends> {{朋友}}< /锂> 
  

例如：

 < DIV> {{artist.friends.toString（）}}< / DIV> 
  

如果要更改分隔符或在逗号后面添加空格，可以使用 join（）数组的方法：

  var friends = ['a'，'b'，'c']; console.log（friends.join（'，'））;  

如果现在你的模型中的列表是一个以逗号分隔的字符串，那么使用 ng-

重复以这种方式从字符串重新创建一个数组：

 < li * ngFor =let artist.friends.split的朋友（'，'）> {{friend}}< / li> 
  

This is a continuation from this question: How to display comma delimited JSON value as a list?

I have this array:

var ARTISTS: Artist[] = [
  {
     "name": "Barot Bellingham",
     "shortname": "Barot_Bellingham",
     "reknown": "Royal Academy of Painting and Sculpture",
     "bio": "Some bio here...",
     "friends": [
       "james",
       "harry",
       "bob"
    ]
  },
  // etc...
]

And I need to display "friends" as an ordered list. I'm doing so like this:

<li *ngFor="let friend of artist.friends">{{friend}}</li>

This works perfectly, but, I now need to restructure my data so that there is no nested array:

var ARTISTS: Artist[] = [
  {
     "name": "Barot Bellingham",
     "shortname": "Barot_Bellingham",
     "reknown": "Royal Academy of Painting and Sculpture",
     "bio": "Some bio here...",
     "friends": "James, Harry, Bob"
  }

How can I continue to display each friend as separate list items, such as:

<ol>
  <li>James</li>
  <li>Harry</li>
  <li>Bob</li>
</ol>

Thank you!

解决方案

Simply use the toString() method to display the list of a string separated by commas.

var friends = ['a', 'b', 'c'];
console.log(friends.toString());

So in your case you could just change this:

<li *ngFor="let friend of artist.friends">{{friend}}</li>

to this for example:

<div>{{artist.friends.toString()}}</div>

If you want to change the separator, or add a space after the commas, you can use the join() method of arrays too:

var friends = ['a', 'b', 'c'];
console.log(friends.join(', '));

Instead if now you have in your model the list as a string separated by comma, use the ng-repeat recreating an array from the string in this way:

<li *ngFor="let friend of artist.friends.split(', ')">{{friend}}</li>

这篇关于以列表项显示逗号分隔值：的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！