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

Question

我正在创建一个Listing ionic application，其中我在主页中显示了从API显示feed。它还具有一些过滤器选项，该选项是actionsheet，具有near by，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();
 }

和我的家.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>

Answer 1

在这里进行了一些研究和YouTube和Udemy的一些研究之后，我发现每当您更改变量的数据时，它都会自动更改视图页面。

因此，在我的情况下，如果我覆盖this.responseData的数据，它将在视图页面上自动更新，但要做很多事情。