Question

我有以下JSON结果：

queryResults =[
    {
        name:cliff,
        age:30,
        hobby:golf,
        email;cliff@gmail.com
    },
    {
        productname:coke,
        productlife:2,
        price:60,
        popularity:1
    }    
]

因为动态结果我必须遍历它们的键和键值来获取属性名称和值以下代码

<md-card  *ngFor='let result of queryResults | keys'>
 <md-card-title-group>
          <md-card-subtitle class="card-details">
              <table class="table">

                    <tr *ngFor='let  cont of result.value | keys'   >
                             <td class="text-bold">{{cont.key}} :</td>
                             <td  > {{cont.value}}</td>
                    </tr>     
              </table>
          </md-card-subtitle>

    </md-card-title-group>

</md-card>

将产生以下格式的结果

  name: cliff
  age: 30
  hobby:golf
  email:cliff@gmail.com

  productname:coke
  productlife:2
  price:60
  popularity:1

如果我想将其渲染为以下格式，我该怎么办？

name: cliff     age:30
hobby:golf      email:cliff@gmail.com

productname:coke   productlife:2
price:60           popularity:1

plunker link https://plnkr.co/edit/jaYdwFRTE2Kdwslx7sl0?p=preview

Answer 1

如果您使用的是html / css框架（如Bootstrap），您可以使用它自己的网格系统...
例如：

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    ...
  </head>
  <body>
    ...
    <md-card *ngFor='let result of queryResults | keys'>
      <md-card-title-group>
        <md-card-subtitle class="card-details">  
          <div *ngFor='let cont of result.value | keys' *ngIf="$index % 2 == 0" class="row">
            <div class="col-xs-3 text-bold">{{cont.key}} :</div>
            <div class="col-xs-3">{{cont.value}}</div>
          </div>
        </md-card-subtitle>
      </md-card-title-group>
    </md-card>
    ...
  </body>
</html>

Answer 2

通过MarcoS的建议找到了解决方案

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    ...
  </head>
  <body>
    ...
    <md-card *ngFor='let result of queryResults | keys'>
      <md-card-title-group>
        <md-card-subtitle class="card-details">  
          <div *ngFor='let cont of result.value | keys; let i =index'>
           <div [ngClass]="{row:i % 2 == 1}">
            <div class="col-xs-3 text-bold">{{cont.key}} :</div>
            <div class="col-xs-3">{{cont.value}}</div>
           </div>
          </div>
        </md-card-subtitle>
      </md-card-title-group>
    </md-card>
    ...
  </body>
</html>

ng每次重复渲染html列

2 个答案: