首页 文章

单击按钮使用离子刷新器

提问于
浏览 次
1

我正在开发一个简单的firebase图像上传页面;但上传文件图片后，由于url相同，因此无法自行更新 . 但我希望它是一样的 . 所以我尝试复习以获得新的图像，它完美的工作，但我必须从顶部拉下来 .

我想在单击按钮时运行此功能，并上传完成 .

<ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
          pullMin="100"
          pullingIcon="arrow-dropdown"
          pullingText="Yenilemek için çekin"
          refreshingSpinner="circles">
        </ion-refresher-content>
      </ion-refresher>
<img src="{{ ppURL }}">

TS;

doRefresh(refresher) {

    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`)
    ppRef.getDownloadURL().then(url => {
      this.ppURL = url

      refresher.complete();
    }).catch(err => {
      // Handle errors

    });
  }

当我拉下来并且图像更新时它完美有效 . 但我无法在另一个功能（单击按钮）中运行此功能 .

this.doRefresh();

此命令给出错误 . 无论如何你知道要解决这个或任何建议吗？

angular typescript firebase ionic-framework ionic3

3 回答

  • 0

    您可以简单地使 refresher 参数可选，因为您在其他位置的调用不会传递 refresher 对象 .

    doRefresh(refresher?:any) { //"?" in typescript means the parameter is optional

    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`)
    ppRef.getDownloadURL().then(url => {
        this.ppURL = url

        refresher && refresher.complete();//make sure refresher is truthy before calling complete
   }).catch(err => {
     // Handle errors

   });
}

    这样您将有效地重载 doRefresh 函数 .

    回复于
  • 0

    你可能不需要复习器 . 复习器旨在被用户拉下来 . 但是如果你在这里查看Refresher代码

    https://github.com/ionic-team/ionic/blob/master/src/components/refresher/refresher.ts

    您应该能够通过调用_beginRefresh函数来触发它 . 你可以使用Angular的ViewChild机制来获取Refresher对象 .

    回复于
  • 1

    您不能使用它，因为它需要 refresher 对象 . 所以只需编写如下所示的新方法并使用 button 触发它 .

    refreshImage() {
    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`)
    ppRef.getDownloadURL().then(url => {
      this.ppURL = url;      
    }).catch(err => {
      // Handle errors
    });
  }

    Note: 如果你想要，你也可以使用上面的方法重构 doRefresh() 方法 . 然后它会跟随 DRY .

    回复于

相关问题