如何仅更改 Angular 应用程序中项目列表中所选项目的过滤器图标状态？

Question

我正在开发 Angular 应用程序，但遇到以下问题。进入组件视图我有这样的东西：

它显示了一个人员列表，如您所见，每个人旁边都有一个小漏斗图标，用于使用所选人员过滤另一个组件的输出（此过滤器行为正常）。单击与特定人员相关的漏斗图标后，它会更改颜色以指示过滤器对特定人员处于活动状态。

问题是点击我列表中某个特定人物的漏斗图标，所有人物的漏斗图标都会变色，这样：

我在我的组件视图中以这种方式处理它：

<p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"
filter="filter" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
<ng-template let-person pTemplate="item">
    <div class="ui-helper-clearfix fc-event" style="background-color: transparent; color:black !important;border: 0px !important;">
      <div class="container">
        <div class="row">
          <div class="col-sm">
            <img src="assets/img/people/person-icon.png" style="display:inline-block;float: left; margin:2px 20px 2px 2px" width="48">
            <div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>
          </div>
          <div class="col-sm">
            <div class="people-operations-icons">

              <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>

            </div>
          </div>
        </div>
      </div>


    </div>
</ng-template>

如您所见，我正在做的是选择空漏斗图标还是满漏斗图标：

<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，当用户单击漏斗时，它会更改状态并变为 true。

问题是，以这种方式它适用于我列表中的所有成员，而不仅仅是选定的成员。我如何才能仅在所选项目上激活此行为？

Answer 1

为单个角色项目创建一个组件，并将其用于呈现列表中的角色项目。您的所有物品都将拥有自己的个人状态，您可以根据自己的状态进行变异 value/data

如何仅更改 Angular 应用程序中项目列表中所选项目的过滤器图标状态？

How can I change a filter icon status only on the selected item of a list of items in my Angular application?

javascript

angular

angular-ng-if