Question

我正在创建一个Listing ionic application，我在主页中显示来自API的供稿。它还有一些过滤器选项，actionsheet包含near by，populer等选项。我想要做的是当用户点击其中一个过滤器，例如populer，我想在同一页面上显示新的Feed。我怎么能这样做？

我的代码库如下

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>

Answer 1

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

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

如何在离子

1 个答案: