Question

我正在使用此管道来过滤下拉列表中的项目。现在我想在从过滤器中选择项目后重置默认数据。

@Pipe({name: 'filterdropdownpipe'})
    export class FilterDropdownPipe implements PipeTransform {
      transform(value: any[], filter: string): Object[] {
        filter = filter ? filter.toLocaleLowerCase() : null;
        return filter ? value.filter((item: any) =>
          (item.name.toLocaleLowerCase().includes(filter)) || filter === '') : value;
      }
    }


<div class="filter-div" *ngFor="let institution of institutions | filterdropdownpipe: searchInstitute">
                    <ul class="drop-list drop-list-2">
                      <li [ngClass]="institution.highlighted ? 'highlighted-filter-item' : 'normal-filter-item'"
                          (click)="onInstitutionSelection(institution)">{{institution.name}}
                      </li>
                    </ul>
                  </div>

Answer 1

如果稍微调整管道，可以通过在过滤器基于空字符串（您尝试过这样做但我认为存在一个小错误）的情况下返回所有值来实现此目的。您还需要在下拉列表中使用空字符串选项。

filter = filter ? filter.toLocaleLowerCase() : ""; // changed from null to ""

另请记住更新搜索字词：

在onInstitutionSelection() - 方法中，设置searchInstitute = ""

Answer 2

@Pipe({
  name: 'searchPipe'
})

HTML

<input [(ngModel)]="searchText" placeholder="search text goes here" [value]="searchText">
<button [hidden]="!searchText"  (click)="searchText = ''">Clear</button>

Answer 3

.html

<input [(ngModel)]="searchText" placeholder="search text goes here" [value]="searchText" >
<button [hidden]="!searchText"  (click)="clearText()">Clear</button>

.ts

clearText(){
    this.searchText = '';
}

如何使用Angular2中的管道清除过滤数据？

3 个答案: