删除项目后的离子列表刷新

时间:2018-04-06 13:14:41

标签: ionic-framework ionic2 ionic3

我试图以异步方式获取数据twitter rest API(更具体地提取我的推文),在我这样做之后,我将它们显示为卡片。我的问题是当我删除推文时,它没有反映在我的应用程序中。

这是我的代码的一部分:

Twitter服务提供商。

fetchDataFromTwitter() {
    return this.httpReader = this.http.get('url').map((resp) => resp).catch((err: any) => {
      return Observable.of(undefined);
    });
  }

twitterList page

public dataFromTwitter:any;
ionViewDidLoad() {
    this.tweetProvider.fetchDataFromTwitter().subscribe((data: any) => {
    ..
    ..
    ..
 some string manuplation..and iterate threw array of tweets
        this.dataFromTwitter.push({
          screenName:tweet.user.screen_name,
          placeOfId: tweet.full_text.slice(indexStart, indexEnd),
          userId: tweet.full_text.slice(indexStartForToken,indexEndForToken)
        })
      });
}
在twitterList.html页面的视图中

<ion-content padding>
  <div *ngIf="dataFromTwitter">
  <ion-card *ngFor="let data of dataFromTwitter">
    <ion-item>
      <h2 >user: {{data .placeOfId }}</h2>
    </ion-item>
    <p>token: {{data.userId}}</p>
    <ion-item>
</ion-content>

示例可能有错误,但我希望这个想法很明确。

2 个答案:

答案 0 :(得分:0)

为了在删除项目后刷新列表,您可以选择以下任何一种方法

  
      
  1. 删除元素时,再次调用get item调用以刷新列表
  2.   
  3. 从数据源数组中删除(拼接)该元素,这将阻止数据在UI中显示。
  4.   

我会建议第二个更好。

答案 1 :(得分:0)

也许您可以尝试这个

为您的.html文件创建离子刷新器

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles"
  refreshingText="Refreshing...">
</ion-refresher-content>

在.ts上创建doRefresh()方法

data: any; // contain array of my data

ngOnInit() {
  this.dataSampah();
}

async dataSampah() {
  this.session_storage().then(() => {
    this.postPrvdr.getData(`tps/invoice?id_tps=` + this.id_tps).subscribe(res => {
      this.data = res.data;
    }, err => {
      console.log(err);
    });
  });
}

doRefresh(event) {
  this.data = null; // this is replacement of splice
  this.ngOnInit(); // 
  setTimeout(() => {
    this.router.navigate(['/invoice-sampah']);
    event.target.complete();
}, 2000);