ngFor每重複

渲染HTML列我有以下JSON結果：ngFor每重複

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

的結果來dynamicaly我必須遍歷這些鍵和鍵值來獲得使用屬性名和值以下代碼

<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:[email protected] 

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

如果我想將其渲染爲以下格式，我應該怎麼做？

name: cliff  age:30 
hobby:golf  email:[email protected] 

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

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

來源

2016-06-09 CliffC

感謝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>

來源

2016-06-10 04:33:05 CliffC

太棒了！這就是我的意思...... :-) – MarcoS

如果your're使用HTML/CSS框架（如引導），你可以使用它自己的網格系統...
例如：

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

來源

2016-06-09 07:20:41 MarcoS

i已經嘗試過，但結果仍然相同 – CliffC

你確定你包含'bootstrap.css'嗎？它絕對是工作！請注意'class =「col col-xs-6」'應該更好地寫成'class =「col-xs-6」'......只是更新了我的答案...... – MarcoS

你說得對，對不起！我現在明白了我的錯誤......只有當ngFor的$ index是偶數（0,2,4，...）時，才應該添加「row」類。只是更新了我的答案，希望它能夠按預期工作，現在... – MarcoS

回答

相關問題