visual studio中的聚合物3.0使用iron-ajax进行rest调用

Question

您好，我使用带有聚合物3.0的visual studio 2017。我尝试使用iron-ajax来休息call.But时，我遇到了错误'Uncaught : Unexpected iron-ajax line 11‘。我在iron-ajax站点复制了相同的示例，但错误是我遗漏的same.What吗？

https://www.webcomponents.org/element/@polymer/iron-ajax

> <script src="node_modules/@polymer/iron-ajax/iron-ajax.js"></script>
>     <script type="module">
>         import { PolymerElement, html } from './node_modules/@polymer/polymer/polymer-element.js';
>         //import './node_modules/@polymer/iron-ajax/iron-ajax.js';
>         class SampleElement extends PolymerElement {
>             static get template() {
>                 return html`
>       <iron-ajax
>           auto
>           url="http://localhost:8033/api/City/All"   
>           hande-as="json"
>           on-response="handleResponse"
>           debounce-duration="300">
>       </iron-ajax>
>     `;
>             }
>         }
> 
>             customElements.define('sample-element', SampleElement);
>     </script>

Answer 1

我试着从你的代码中找出，但我找不到。也许问题出在那里的其他地方。下面是一个有效的示例：(我刚刚更改了URL以检索一些数据：

DEMO

import {PolymerElement, html} from '@polymer/polymer';

import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/iron-list/iron-list.js';
import '@polymer/iron-image/iron-image.js';

class SampleElement extends PolymerElement {
            static get properties() { return { 
                  response: { type: Object }
             }
            }
             static get template() {
                 return html`
               <iron-ajax 
                 auto id="ajax"
                 url="https://randomuser.me/api?results=10"
                 last-response="{{response}}"
                  on-response="handleResponse"
              > </iron-ajax>

                 <iron-list items="[[response.results]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
                 <template>
                       <div class = "flexchild" style="width:50%"> 
                        <iron-image   style ="width: 40px;height:40px; border-radius:30px;" src='[[item.picture.large]]'></iron-image> 
                        <span>[[item.name.first]] [[item.name.last]]</span>  </div><br/>
                  </template>
                  </iron-list>


                  `;
             }

     handleResponse(r) {
       console.log(r)
     }
  }
 customElements.define('sample-element', SampleElement);