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

我需要展示＆＃34;朋友＆＃34;作为有序列表。我是这样做的：

<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()方法显示以逗号分隔的字符串列表。

＆＃13;

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

＆＃13;

所以在你的情况下你可以改变这个：

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

以此为例：

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

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

＆＃13;

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

＆＃13;

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

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

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

1 个答案: