0

您好我正在尝试制作动态过滤器选项，该选项根据后端输入的数据呈现属性及其值。在选择值时，我想获取检查的值并将其传递给后端进行过滤。我能够显示过滤器选项，但是当我们选择复选框时无法获取选中的值。

我正在使用元素 ref 并查看 Child 这样做。

HTML页面：

<div #propertyFilterDiv id="{{propertyFilterData?.name}}" *ngFor="let propertyFilterData of propertyFiltersData" class="collection-filter-block">
    <div class="collection-mobile-back" (click)="toggleMobileSidebar()">
        <span class="filter-back">
            <i class="fa fa-angle-left" aria-hidden="true"></i> back
        </span>
    </div>

    <div   class="collection-collapse-block border-0 open">
        <h3   class="collapse-block-title">{{propertyFilterData?.name}}</h3>
        <div   class="collection-collapse-block-content">
            <div   class="collection-brand-filter">
                <ul   class="category-list">
                    <li *ngFor="let propertyvalue of propertyFilterData?.values ">
                        <div class="container-fluid">
                            <input value="{{propertyvalue?.value}}" class="property_{{propertyFilterData?.id}}"  (click)="filterData($event)" type="checkbox" />
                            <a > {{propertyvalue?.value}} </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>

TS 代码。

  filterData(e){
    this.propertyFilterDiv.forEach(propertyFilter =>{
      console.log(propertyFilter.nativeElement.id)
      console.log(propertyFilter.nativeElement.children)
    });
  }

任何帮助将不胜感激。需要有关过滤数据的相同和最佳方法的指导。

4

1 回答 1

0

在您的点击事件中，您可以将属性 id 传递给您的 filterData 方法

(click)="filterData($event, propertyvalue)"

并将其用于过滤

  filterData(e, propertyValue){ ... }

如果要跟踪检查值列表，请先启动它，例如：

listOfCheckedProperties = { propA: true, propB: false, propC: false };

并在单击触发的 filterData 函数上更新它（选中/取消选中）。

您还可以使用 ngModel 自动跟踪，查看角度形式：https ://angular.io/guide/forms

于 2020-06-30T09:08:52.897 回答