0

好的。所以我上一个帖子太模棱两可了。对于我的第二篇文章，让我尝试以更直截了当的方式解决同样的问题。下面是代码。这是我得到的结果的屏幕截图。关于第二个 Iron-ajax 调用，如果我在终端中使用 curl 和 this () 我得到我想要的（它是一个链接预览服务，所以标题、img、desc 等）。尝试使用按照规范定义的所需参数的 Iron-ajax 帖子来完成相同的任务。我没有收到任何控制台错误（第一次），并且根据我在第二个 dom-repeat 正文中输出最后响应变量时得到的 [object.Object] 结果，似乎正在返回一个 json 对象就像第一个 iron-ajax 调用（它确实有效，包括链接但没有足够的数据，因此通过返回我想要显示的数据的第二个服务运行链接）。

本地运行代码的结果

代码：

<dom-module id="my-new-view">
<template>
<!-- Defines the element's style and local DOM -->
  <style>
  :host {
    display: block;

    padding: 16px;
  }
</style>
<iron-ajax auto
  url="https://api.rss2json.com/v1/api.json?rss_url=http://feeds.feedburner.com/DrudgeReportFeed"
  params="{"fmt":"xml-rss"}"
  handle-as="json"
  last-response="{{ajaxResponse}}"></iron-ajax>
<p>First: {{ajaxResponse}}</p>
<template is="dom-repeat" items="[[ajaxResponse.items]]" as="item" index-as="item_no">
<p>{{item.title}}</p>

<iron-ajax auto
method="post"  
url="https://guteurls.de/api/"
  params="{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}"
  handle-as="json"
  last-response="{{newAjaxResponse}}"></iron-ajax>

  <p>Second: {{newAjaxResponse}}</p>


  <template is="dom-repeat" items="[[newAjaxResponse.newItems]]" as="newItem" index-as="newItem_no">

    <p>{{newItem.title}}</p>
    <paper-card heading="{{newItem.title}}" image="{{newItem.image.url}}" alt="{{newItem.title}}">
      <div class="card-content">
       <h1>Description: {{newItem.desc}}</h1>
       <p>Test</p>
      </div>
      <div class="card-actions">{{newItem.title}}
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>

</template>
</template>
</template>

<script>
class MyNewView extends Polymer.Element {
static get is() { return 'my-new-view'; }
}



customElements.define(MyNewView.is, MyNewView);


</script>
</dom-module>
4

1 回答 1

0

问题及解决方案：

  1. params="{"fmt":"xml-rss"}"
    • 引用没有正确完成。您可以单引号以及喜欢
      params='{"fmt":"xml-rss"}'或params="{'fmt':'xml-rss'}"

  2. First: {{ajaxResponse}}和Second: {{newAjaxResponse}}

    • 您可以使用console调试，因为您不能显示这样的对象

  3. params="{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}"

    • 引用没有正确完成。
    • 属性绑定 ie{{item.guid}}后面必须跟$.
    • 改成params$='{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}'
  4. newAjaxResponse.newItems
    • newItems中没有newAjaxResponse。只需使用newAjaxResponse
    • [注意：newAjaxResponse返回为Object必须转换为，Array因为dom-repeat仅适用于Array.]
  5. 在定义类似 的字段之前desc，请image.url确保它存在。

工作代码：

<dom-module id="my-new-view">
<template>
<!-- Defines the element's style and local DOM -->
  <style>
  :host {
    display: block;

    padding: 16px;
  }
</style>
<iron-ajax auto url="https://api.rss2json.com/v1/api.json?rss_url=http://feeds.feedburner.com/DrudgeReportFeed" params='{"fmt":"xml-rss"}' handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
<p>First: {{ajaxResponse}}</p>
<template is="dom-repeat" items="[[ajaxResponse.items]]" as="item" index-as="item_no">
  <p>{{item.title}}</p>

  <iron-ajax auto method="post" url="https://guteurls.de/api/" params$='{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}' handle-as="json" last-response="{{newAjaxResponse}}"></iron-ajax>

  <p>Second: {{newAjaxResponse}}</p>


  <template is="dom-repeat" items="[[_toArray(newAjaxResponse)]]" as="newItem" index-as="newItem_no">

   <paper-card heading="{{newItem.title}}" image="{{newItem.img}}" alt="{{newItem.title}}">
     <div class="card-content">
       <h1>Description: {{newItem.description}}</h1>
       <p>Test</p>
     </div>
     <div class="card-actions">{{newItem.title}}
      <paper-button>Share</paper-button>
      <paper-button>Explore!</paper-button>
     </div>
  </paper-card>

  </template>
</template>
</template>

<script>
class MyNewView extends Polymer.Element {
  static get is() { return 'my-new-view'; }

  _toArray(obj) {
      var tempArray = [];
      tempArray.push(obj);
      //console.log(tempArray);
      return tempArray;
    }

}



customElements.define(MyNewView.is, MyNewView); 

</script>
</dom-module>

您可以在此处查看工作演示。

于 2017-09-11T00:18:15.863 回答