将逗号分隔的值显示为列表项：

Question

这是这个问题的延续：How to display comma delimited JSON value as a list?

我有一个数组：

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

我需要把“朋友”列成一个有序的名单。我就是这样做的：

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

这很好，但是，我现在需要重新构造数据，这样就没有嵌套数组了：

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

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

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

谢谢!

Answer 1

只需使用toString()方法显示由逗号分隔的字符串列表。

​

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

​

所以，在你的例子中，你可以改变这个：

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

例如，对此：

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

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

​

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

​

相反，如果您现在在模型中将列表作为由逗号分隔的字符串，请使用ng-repeat从字符串中重新创建数组，方式如下：

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