Ionic list refresh after deleting an item

Question

I am trying to fetch data asynchronously twitter rest API (fetching my tweets to be more specific), and after I do so, I display them as cards. My problem is when I delete a tweet, it does not reflect in my application.

here's a part of my code:

Twitter service provider.

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)
        })
      });
}

in the view for the twitterList.html page

<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>

the example might have errors but, but I hope the idea is clear.

Answer 1

In order to refresh the list after deleting an item, you could choose any one of the following methods

1. On deleting an element, call the get item call again to refresh the list
2. Remove(splice) the element from the data source array, this will block the data from showing in the UI.

I will suggest the second one be better.

Answer 2

Maybe you can try this one

Create ion-refresher for your .html files

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

Create doRefresh() method on .ts

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);