时间戳

首页 > 解决方案 > 当我在 Angular 应用程序中单击图标时，如何将与特定元素相关的特定值传递到列表中？

angular - 当我在 Angular 应用程序中单击图标时，如何将与特定元素相关的特定值传递到列表中？

问题描述

我正在做一个 Angular 项目，我现在面临一个问题，我不知道什么是一个好的解决方案。

基本上，我在我的应用程序中包含此部分，其中包含人员列表：

在此处输入图像描述

正如您所看到的，每个人都有一个名字，目前类似于PERSONA 1、PERSONA 2等。每个人旁边都有一个漏斗图标，一旦单击它将执行过滤特定人的方法。

这是我的人员列表组件的视图代码（在上一个屏幕截图的左侧显示人员列表）：

<p-selectButton [options]="workShiftTypes" [(ngModel)]="selectedShift" optionLabel="name"></p-selectButton>
<p>Selected Work Shift: {{selectedShift ? selectedShift.value : 'none'}}</p>

<div class="custom_sift" *ngIf="selectedShift.value == 'custom'">
  <app-custom-event-date-selector
                (notifyStartEndTime)="onChangeCustomShiftDate($event)">
  </app-custom-event-date-selector>
</div>

<div #draggable_people>

  <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($event)">
                    <svg 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>
  </p-orderList>
</div>

正如您在此 HTML 代码中看到的那样，我有这一行：

<button class="btn" (click)="onClickFilter($event)">

在传递点击事件的组件打字稿代码上调用onClickFilter()方法。它工作正常，但我注意到以这种方式传递的事件不包含与单击的漏斗元素相关的人名相关的信息。

第一个想法可能是将包含的person.name值传递到：

<div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>

但我绝对不确定这一点。

实现此行为的好方法是什么？我怎样才能做到这一点？

标签： angular

解决方案

你能把person对象作为参数传递给你onClickFilter吗？

<button class="btn" (click)="onClickFilter(person, $event)">

推荐阅读