Question

我的应用程序调用一个将消息返回到前端的服务。

在前端，我会显示如此消息

    <div class="col-md-12">

<article class="panel panel-default" [ngStyle]="{backgroundColor: color}" (mouseenter)="color = 'green'">
    <div class="panel-body">


        {{message.content}}<br />
        {{message.orderType}}

    </div>
    <footer class="panel-footer">
        <div class="author">
            {{message.username}}
        </div>
        <div class="config">
            <a (click)="onEdit()">Edit</a>
            <a (click)="onDelete()">Delete</a>
            <a (click)="onComplete()">Complete</a>
        </div>
    </footer>
</article>
</div>

从调用传回来的这个JSON就像这样

{
  "message": "Success",
  "obj": [
    {
      "_id": "5a512e4b43f7ed0014df8ba6",
      "content": "test1, test2, test3",
      "orderType": "Completed",
      "__v": 0
    },
    {
      "_id": "5a523895d47c50593595b457",
      "content": "Test1, Test2, Test3",
      "orderType": "Completed",
      "__v": 0
    },
    {
      "_id": "5a523bf7d47c50593595b458",
      "content": "New order, test1, test2",
      "orderType": "Completed",
      "__v": 0
    }
  ]
}

我想要做的是将message.content拆分成一个数组然后我可以在一个新行上显示数组中的每个项目，而不是显示一个长字符串。

Answer 1

"message.content" it is wrong to display. because "content" is not a property of "message"

使用以下格式在新行中显示内容。

$scope.data = {
  "message": "Success",
  "obj": [
    {
      "_id": "5a512e4b43f7ed0014df8ba6",
      "content": "test1, test2, test3",
      "orderType": "Completed",
      "__v": 0
    },
    {
      "_id": "5a523895d47c50593595b457",
      "content": "Test1, Test2, Test3",
      "orderType": "Completed",
      "__v": 0
    },
    {
      "_id": "5a523bf7d47c50593595b458",
      "content": "New order, test1, test2",
      "orderType": "Completed",
      "__v": 0
    }
  ]
}

<div class="col-md-12">
<article class="panel panel-default" [ngStyle]="{backgroundColor: color}" (mouseenter)="color = 'green'">
    <div class="panel-body" >
        <div class="row" ng-repeat="msg in data.obj">
         <p>{{msg.content}}</p>
        <small>{{msg.orderType}}</small>

    </div>
    <footer class="panel-footer">
        <div class="author">
            {{message.username}}
        </div>
        <div class="config">
            <a (click)="onEdit()">Edit</a>
            <a (click)="onDelete()">Delete</a>
            <a (click)="onComplete()">Complete</a>
        </div>
    </footer>
</article>
</div>

Angular在模板中拆分JSON字符串

1 个答案: