删除项目后离子列表刷新答案

【问题标题】：Ionic list refresh after deleting an item删除项目后离子列表刷新
【发布时间】：2018-04-06 13:14:41
【问题描述】：

我正在尝试异步获取数据 twitter rest API（获取我的推文更具体），并且在我这样做之后，我将它们显示为卡片。我的问题是当我删除一条推文时，它并没有反映在我的应用程序中。

这是我的代码的一部分：

Twitter 服务提供商。

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

twitter列表页面

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>

这个例子可能有错误，但是我希望这个想法是清楚的。

【问题讨论】：

标签： ionic-framework ionic2 ionic3

【解决方案1】：

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

删除元素时，再次调用 get item 调用以刷新列表

从数据源数组中移除（拼接）元素，这将阻止数据在 UI 中显示。

我会建议第二个更好。

【讨论】：

嘿@Nitheesh 删除基本上是当我在 twitter 上删除一条推文时，那么它如何与我的应用程序链接，我使用拼接从我的应用程序发布的推文中获取必要的数据
我也忘了提到我不能选择第二个选项，因为我必须拼接原始数据以获得所需的数据
只是为了更新，我最终通过拉动刷新来解决这个问题。但是，我遇到了一个方法，它调用每 N 秒更新一次列表的函数。如果有人对此感兴趣。

【解决方案2】：

也许你可以试试这个

为您的 .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);

【讨论】：

这也可以在 ionic v4 中实现