Come utilizzare la lista di ferro con Angular 2.0

Question

Sto cercando di far funzionare la lista di ferro in Angular 2.0. Sto già usando altri componenti di Polymer 1.0, ma la lista di ferro dipende molto da Light DOM. So che potrei rimuovere e solo * ng-per il contenuto in elenco, ma sto pensando che non funzionerà bene. Qualcuno ha qualche idea.

Answer 1

Il problema è che Angular 2 analizza gli elementi <template>, sebbene debbano essere lasciati al Polymer Templatizer all'interno di <iron-list>.

Dalla mia esperienza, il modo migliore per gestire questa situazione è avvolgere <iron-list> all'interno di un elemento Polymer personalizzato e definire i modelli lì.

<dom-module id="heroes-list"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <iron-list items="[[items]]" selection-enabled selected-item="{{selectedItem}}"> 
    <template>[[item]]</template> 
    </iron-list> 
    </template> 
    <script> 
    Polymer({ 
     is: 'heroes-list', 

     properties: { 
     items: { 
      type: Array 
     }, 

     selectedItem: { 
      type: Object, 
      notify: true 
     }, 
     } 
    }); 
    </script> 
</dom-module> 

Questo elemento può poi essere utilizzato in qualsiasi angolare 2 app con due vie vincolante in questo modo:

<heroes-list [items]="heroes" (selected-item-changed)="myHero=$event.detail.value">