聚合物阵列错误

Question

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<link rel="import" href="../bower_components/app-layout/app-layout.html"> 
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/effects/waterfall.html"> 
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html"> 
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"> 

<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/paper-progress/paper-progress.html"> 

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"> 



<dom-module id="pokedex-app"> 
    <template> 
    <style is="custom-style"> 
     :host { 
     display: block; 
     } 

     app-toolbar { 
     background-color: #4285f4; 
     color: #fff; 
     } 

     paper-icon-button + [main-title]{ 
     margin-left: 24px; 
     } 

     app-drawer h1 { 
     text-align: center; 
     background-color: #4285f4; 
     } 

     .drawer-list a { 
     display: block; 
     padding: 0 16px; 
     text-decoration: none; 
     color: #4285f4; 
     line-height: 40px; 
     } 

     .drawer-list a.iron-selected { 
     color: black; 
     font-weight: bold; 
     } 

     paper-button { 
     background-color: #4285f4; 
     color: #fff; 
     } 

     paper-card { 
     height: 135px; 
     width: 135px; 
     display: inline-block; 
     margin: 10px; 

      --paper-card-header-image: { 
      display: block; 
      margin: 0 auto; 
      height: 96px; 
      width: 96px; 
      } 
      --paper-card-content: { 
      padding: 5px; 
      text-align: center; 
      } 
     } 

     paper-progress { 
     --paper-progress-active-color: crimson; 
     width: 100%; 
     } 

     .main { 
     text-align:center; 
     } 

    </style> 

    <iron-ajax 
     id="getPoke" 
     auto 
     url="http://pokeapi.co/api/v2/pokemon/" 
     handle-as="json" 
     loading="{{activeRequest}}" 
     params='{"dataType": "jsonp", "limit": "10"}' 
     last-response="{{response}}" 
     on-response="setData"> 
    </iron-ajax> 


    <app-header-layout> 
     <app-header fixed condenses effects="waterfall"> 
     <app-toolbar> 
      <paper-icon-button src="images/pokedex.ico" on-tap="toggle"></paper-icon-button> 
      <div main-title>Pokédex</div> 
      <paper-progress indeterminate class="slow" bottom-item hidden="[[!activeRequest]]" disabled="[[!activeRequest]]"></paper-progress> 
     </app-toolbar> 
     </app-header> 
    </app-header-layout> 

    <app-drawer-layout fullbleed> 
     <app-drawer id="drawer" swipe-open> 
      <iron-selector class="drawer-list" role="navigation"> 
      <a href="/view1">Kanto</a> 
      <a href="/view2">Johto</a> 
      </iron-selector> 
     </app-drawer> 
    </app-drawer-layout> 

    <div class="main"> 
     <template id="if" is="dom-if" if="[[pokemons]]"> 
     <template id="for" is="dom-repeat" items=[[pokemons]]> 
      <paper-card on-tap="test" image="https://raw.githubusercontent.com/PokeAPI/pokeapi/master/data/v2/sprites/pokemon/[[getIndex(index)]].png"> 
      <div class="card-content">#[[getIndex(index)]]: [[uppercase(item.name)]]</div> 
      </paper-card> 
     </template> 
     </template> 
    </div> 

    <paper-button on-tap="getMorePokemon" hidden$="[[activeRequest]]">Get 10 more Pokémon</paper-button> 
    </template> 

    <script> 
     class MyApplication extends Polymer.Element { 
      static get is() { 
       return 'pokedex-app'; 
      } 
      static get properties() { 
       return { 
       pokemons: { 
        type: Array, 
        value: [], 
        notify: true, 
       } 
       } 
      } 

      toggle(){ 
       this.$.drawer.toggle(); 
      } 

      setData(){ 
       this.pokemons = this.response.results; 
      } 

      getIndex(index){ 
       if(this.$.getPoke.params.offset === undefined){ 
       return index + 1; 
       } else { 
       return index + 1 + this.$.getPoke.params.offset; 
       } 
      } 

      uppercase(name){ 
       return name.charAt(0).toUpperCase() + name.substr(1).toLowerCase(); 
      } 

      getMorePokemon(){ 

       if(this.$.getPoke.params.offset === undefined){ 
       this.$.getPoke.set('params.offset', 10); 
       } else { 
       this.$.getPoke.set('params.offset', this.$.getPoke.params.offset + 10); 
       } 
       this.$.getPoke.generateRequest(); 

      } 
     } 

     window.customElements.define(MyApplication.is, MyApplication); 
    </script> 
</dom-module> 

所以这是我当前的代码，所以会发生什么是后response它添加response.results的小宠物的数组，我真正想要做的是每当用户按下按钮，重新做调用，但将其添加到现有的宠物小精灵数组中。然而使用this.pokemon += this.response.results;不起作用，给了我一个数组内的数组，这不是我想要的，我只是想要一个数组与不同的对象。

谢谢你的时间！

Answer 1

Here解释了为什么this.pokemon += this.response.results不起作用的原因。
无论如何，我认为你应该使用polymer's push method。 Here你可以找到关于该方法的简短说明。