Question

我有一个带有json对象的数组

msgBodyDetailArr = [
    {
      Body: [
        { Id: 1, Name: 'Tomato Soup', Category: 'Groceries', Price: 1.0 },
        { Id: 2, Name: 'Yo-yo', Category: 'Toys', Price: 3.75 },
        { Id: 3, Name: 'Hammer', Category: 'Hardware', Price: 16.99 }
      ]
    }
  ];

现在我想在我的角度应用程序中查看这个，所以我创建了一个非常简单的页面：

<div class="list-group" *ngFor="let item of msgBodyDetailArr; let i=index">
  <div class="list-group-item">
    <h4 class="list-group-item-heading"> Message body </h4>
    <p class="list-group-item-text"> {{item.Body | json }} </p>
  </div>
</div>

我尝试使用json管道中的构建，但视图的输出是这样的：

消息正文 [{＆＃34; Id＆＃34;：1，＆＃34; Name＆＃34;：＆＃34; Tomato Soup＆＃34;，＆＃34; Category＆＃34;：＆＃34; Groceries＆＃34;，＆＃34;价格＆＃34;：1}，{＆＃34; Id＆＃34;：2，＆＃34;姓名＆＃34;：＆＃34;溜溜球＆＃34;，＆＃34;类别＆＃ 34;：＆＃34; Toys＆＃34;，＆＃34; Price＆＃34;：3.75}，{＆＃34; Id＆＃34;：3，＆＃34;姓名＆＃34;：＆＃34; Hammer＆＃34;，＆＃34;类别＆＃34;：＆＃34;硬件＆＃34;，＆＃34;价格＆＃34;：16.99}]

有没有办法让它像这样格式化？

{ Id: 1, Name: 'Tomato Soup', Category: 'Groceries', Price: 1.0 },
{ Id: 2, Name: 'Yo-yo', Category: 'Toys', Price: 3.75 },
{ Id: 3, Name: 'Hammer', Category: 'Hardware', Price: 16.99 }

非常感谢，利诺

Answer 1

您可以尝试此解决方案

使用<pre>代码

<div class="list-group" *ngFor="let item of msgBodyDetailArr; let i=index">
  <div class="list-group-item">
    <h4 class="list-group-item-heading"> Message body </h4>
    <pre class="list-group-item-text"> {{item.Body | json }} </pre>
  </div>
</div>

或

<div class="list-group" *ngFor="let item of msgBodyDetailArr">
  <div class="list-group-item">
    <h4 class="list-group-item-heading"> Message body </h4>
    <p class="list-group-item-text" *ngFor="let singleObj of item.Body">{{singleObj | json }}</p>
  </div>
</div>

Answer 2

因为它可以像这样尝试

    def obj_expression(model):
        curve = sum(model.x[area, hour, Type, index] * model.Q[area, hour, Type, index] * 
                    ( model.P1[area, hour, Type, index] + model.P0[area, hour, Type, index] ) / 2  
                        for (area, hour, Type, index) in model.Curve )
        bids = sum(model.y[area, index] * model.PB[area, index] * 
                       sum( model.QB[area, index, hour] for (hour) in model.Hours ) 
                               for (area, index) in model.Bids  )
        return curve + bids
    self.model.OBJ = pe.Objective(rule = obj_expression, sense = pe.maximize)

Answer 3

如果要显示数组的对象，则必须迭代Body数组。为此，您必须再次使用*ngFor来迭代Body数组。

<div class="list-group" *ngFor="let item of msgBodyDetailArr">
  <div class="list-group-item">
    <h4 class="list-group-item-heading"> Message body </h4>
    <p class="list-group-item-text" *ngFor="let obj of item.Body">{{obj | json }}</p>
  </div>
</div>

Angular 5和json格式 - ＆gt;格式不好

3 个答案: