Как я могу изменить статус значка фильтра только для выбранного элемента списка элементов в моем приложении Angular? - PullRequest
Новая
       73

Как я могу изменить статус значка фильтра только для выбранного элемента списка элементов в моем приложении Angular?

0 голосов
/ 14 июля 2020

Я работаю над приложением Angular, и у меня возникла следующая проблема. В представлении компонентов у меня есть что-то вроде этого:

enter image description here

It shown a people list, as you can see next to each person there is a little funnel icon used to filter the output of another component using the selected person (this filter behavior works fine). Once that the funnel icon related to a specific person is clicked it change color to indicate that the filter is active on the specific person.

The problem is that clicking on the funnel icon related a specific person in my list, all the funnel icons of all the persons change color, in this way:

enter image description here

I was handling it in this way into my component view:
image {{person.name}}

Как видите, чтобы выбрать пустой или полный значок воронки, я делаю: 

<button class="btn" (click)="onClickFilter(person, $event)">
    <svg *ngIf="isFilterByPersonActive == false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
    </svg>

    <svg *ngIf="isFilterByPersonActive == true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
    </svg>
</button>

Итак, я использую эту isFilterByPersonActive переменную, определенную в мой машинописный код. По умолчанию эта переменная имеет значение false, и когда пользователь щелкает по воронке, она меняет статус и становится истинной.

Проблема в том, что таким образом она работает со всеми членами моего списка, а не только с выбранным. Как я могу активировать это поведение только для выбранного элемента?

1 Ответ

1 голос
/ 14 июля 2020

Создайте компонент для одного элемента персонажа и используйте его для отображения элементов персонажа в списке. Все ваши предметы будут иметь свое личное состояние, которое вы можете изменить с помощью собственного значения / данных

...