Question

我正在尝试在加载iron-ajax时显示加载微调器，否则显示AJAX内容。但是，我只能在加载属性之前根据!显示一个或多个DOM。

＆＃13;

Polymer({
  is: 'example-element',
  connectedCallback() {
    console.log(this.loading); // logs undefined
  }
});

＆＃13;

<base href="https://polygit.org/polymer+polymer+v2.5.0/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="iron-ajax/iron-ajax.html" />
<link rel="import" href="paper-spinner/paper-spinner.html" />

<example-element></example-element>

<dom-module id="example-element">
  <iron-ajax id="ajax" url="https://api/endpoint" method="post" handle-as="json" content-type="application/json" body="[[request]]" last-response="{{response}}" loading="{{loading}}"></iron-ajax>

  <template is="dom-if" if="{{loading}}">
      <paper-spinner active></paper-spinner>
    </template>

  <template is="dom-if" if="{{!loading}}">
      <template is="dom-repeat" items="[[response]]" as="item">
        <p>[[item]]</p>
      </template>
  </template>
</dom-module>

＆＃13;

是否需要在组件属性中显式设置loading属性？

Answer 1

在您的示例中，您实际上并没有告诉iron-ajax做任何事情，所以事实并非如此。

在确定loading未定义之前，您可以打印出加载内容，这样您就可以看到它处于什么状态。

我已经汇总了一个示例，它会向您显示状态，但也有一个按钮，因此您可以触发iron-ajax来执行请求（我建议使用chrome作为示例）。

Polymer({
  is: 'example-element',
  _startRequest: function() {
    this.shadowRoot.querySelector('iron-ajax').generateRequest()
  }
});

<base href="https://polygit.org/polymer+polymer+v2.5.0/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="iron-ajax/iron-ajax.html" />
<link rel="import" href="paper-spinner/paper-spinner.html" />
<link rel="import" href="paper-button/paper-button.html" />

<example-element></example-element>

<dom-module id="example-element">
  <template>
    <div>Loading status:[[loading]]</div>
    <iron-ajax id="ajax"
      url="https://api/endpoint"
      method="post"
      handle-as="json"
      content-type="application/json"
      body="[[request]]"
      last-response="{{response}}"
      loading="{{loading}}"></iron-ajax>

    <template is="dom-if" if="{{loading}}">
      <paper-spinner active></paper-spinner>
    </template>

  <template is="dom-if" if="{{!loading}}">
      I appear when loading is false
  </template>

  <br />
  <paper-button on-tap="_startRequest">Load</paper-button>
  </template>
</dom-module>

我希望你能找到这个有用的

如何在聚合物中显示加载动画

1 个答案: