离子性-单击某项应更新列表

Question

I have a list of items with ngIf like the following

<ion-list>
  <ion-item *ngIf="isItemInThisYear(item.id)">  
</ion-list>

Each item can appear several times but only the records from this year will appear. This works.

When clicking an item inside this list, I want to refresh the list but this time, the list should only show records of the selected item (regardless the date).

I understand that I should change (name as well) isItemInThisYear to accommodate either options but how can I send the value/parameter from the clicked item to the whole page so it will reload its list with the relevant parameter?

Answer 1

Have you tried adding a click handler and passing the item in that way? I'm guessing you'll also want to make this a button (or similar) if it's meant to be clicked.

<button ion-item (click)="filterList(item)" *ngIf="shouldItemBeDisplayed(item.id)"></button>

Also, you may want to consider updating an observable or a member variable with the list of items to be displayed. That may allow you to always bind buttons to all the known items you want to show, in place of executing an *ngIf on every item to determine if it should be displayed or not.