在离子中应用过滤器后如何在同一页面中显示提要答案

【问题标题】：How to show feeds in the same page after applying filters in ionic在离子中应用过滤器后如何在同一页面中显示提要
【发布时间】：2018-02-14 17:08:28
【问题描述】：

我正在创建一个Listing ionic application，我在主页中显示来自 API 的提要。它还有一些过滤器选项，例如 actionsheet，带有 near by、populer 等选项。我想要做的是当用户单击其中一个过滤器（例如 populer）时，我想在同一页面上显示新的提要。我该怎么做？？

我的代码库如下

home.ts

constructor(....){
      this.getFeeds();
  }

//make api call to get the feeds
  getFeeds(){
      const data = localStorage.getItem('userToken');
      this.userPostData.api_token= data;
      this.authService.postData(this.userPostData,'feeds').then((result)=>{
          this.responseData = result;
      })
  }

//Feeds by location

//Actionsheet 
  filters() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Sort Events by',
     buttons: [
       {
         text: 'Location',
         icon:'pin',
         handler: () => {
            //Make api call to feeds based on location
         }
       },
       {
         text: 'Popularity',
         icon:'people',
         handler: () => {
            //Make api call to feeds based on location
         }
       }
     ]
   });

   actionSheet.present();
 }

而我的 home.html 是

<ion-card *ngFor="let item of responseData?.feed"  tappable (click)="viewDetail(item.id)">
    <div class="event-image-holder search-list">
      <img src="http://localhost:8000/{{item.photo_url}}"/>
      <div class="event-attendee-count">
         <ion-icon name="people"></ion-icon> {{item.attendees.length}} are going
      </div>
    </div>
    <ion-card-content>
      <div class="event-info">
        <div class="event-time">
            <!-- 04 Feb -->
        {{item.gmt_date_set | date:'dd MMM'}}
        </div>
        <div class="event-descp">
          <h2>{{item.title}}</h2>
          <p>
            {{item.club.name}}
          </p>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

【问题讨论】：

标签： ionic-framework ionic2 ionic3

【解决方案1】：

经过一些来自 youtube 和 udemy 的研究，我发现当你更改变量的数据时，它会在视图页面上自动更改。

所以在我的情况下，如果我覆盖 this.responseData 的数据，它将在视图页面上自动更新，而无需做太多事情。

【讨论】：