2016-09-14 1 views
0

내 데이터는 키 - 값 쌍이있는 객체의 배열입니다. 폴리머 구성 요소의 데이터가있는 표를 채우려고합니다. 키를 명시 적으로 사용하면 작동합니다. 여기에 "FacilityId"와 예는 다음과 같습니다 그러나데이터 키를 모른 채 셀 채우기

<table class="table table-striped table-bordered table-hover"> 
    <thead> 
    <tr> 
     <template is="dom-repeat" items="{{columns}}"> 
      <th>{{item}}</th> 
     </template> 
    </tr> 
    </thead> 
    <tbody> 
     <template is="dom-repeat" items="{{data}}"> 
      <tr> 
       <td>{{item.FacilityId}}</td> 
      </tr> 
     </template> 
    </tbody> 
</table> 

, 당신은 동적으로 생성 된 열에서 볼 수있는 나는 항상 키가 지정됩니다 모르겠어요있다. {{item[0]}}을 사용해 보았지만 작동하지 않아 얼마나 많은 사람들이 있을지 모릅니다. 중첩 템플릿을 사용해 보았지만 알아 내지 못했습니다. 여기

내 데이터가 모습입니다 (다시 필드의 수와 이름은 비록 다를 수 있음) : @ 데이비드 R에 의해 참조되는 답변에 따라

enter image description here

+0

Misrea 귀하의 질문, 귀하의'FaciltyId','LastMessage' 및'SourceConfigName'은 그대로 유지됩니까?, 나는 그들의 각각의 가치가 역동적 인 권리로 오는 것을 의미합니까? –

+0

아니요, 열 이름과 개수가 변경 될 수 있습니다. 이것은 재사용 가능한 폴리머 구성 요소입니다 –

+2

여기서 'Scott Miles'가 제공 한 답변을 확인해주십시오. - http://stackoverflow.com/questions/30781500/how-to-use-dom-repeat-with-objects-instead-of -arrays-in-polymer-1-0 –

답변

0

는,이 작품 :

<table class="table table-striped table-bordered table-hover"> 
    <thead> 
    <tr> 
     <template is="dom-repeat" items="{{columns}}"> 
      <th>{{item}}</th> 
     </template> 
    </tr> 
    </thead> 
    <tbody> 
     <template is="dom-repeat" items="{{data}}"> 
      <tr> 
       <template is="dom-repeat" items="{{_toArray(item)}}"> 
        <td>{{item.value}}</td> 
       </template> 
      </tr> 
     </template> 
    </tbody> 
</table> 

그리고 https://stackoverflow.com/a/30794220/736893에서 사용자 지정 기능 :

Polymer({ 
    is: 'widget-table', 
    properties: { 
     data: { 
      type: Array, 
      value: function() {return []} 
     } 
    }, 
    _toArray: function(obj) { 
     return Object.keys(obj).map(function(key) { 
      return { 
       name: key, 
       value: obj[key] 
      }; 
     }); 
    } 
}); 
관련 문제