Question

我有一个问题，我们可以使用forEach进行搜索和过滤结果吗？我有一个4下拉列表和一个提交按钮，例如，当我选择一个或两个标准并单击提交时，结果将显示在dataTable

就像我选择ABC值一样，结果将显示包含该ABC字的所有数据

有可能吗？

<div class="nd_panel form_filter_home fixed" id="panel-filter-search-container">
  <h6 class="accordion-toggle" href="#filters" (click)="toggleCollapse($event)">
    <span class="glyphicon glyphicon-filter text-primary"></span>
    <label>{{ 'search-filtre' | translate }}</label>
  </h6>
  <div class="nd_panel_content collapse" [ngClass]="{'in': !collapsed}" id="filters">
    <div class="container-fluid" id="panel-filter-search">
      <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)">
        <span class="text-danger" id="message-valid-filter-search">{{errorMessage}}</span>
        <div class="row">
          <div class="col-xs-2" id="code-filter-search">
            <p-dropdown [options]="displayedEntityCodes" (onChange)="onCodeChange($event.value)" filter="filter"  placeholder="Code"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedEntityCode']" >
            </p-dropdown>
          </div>
          <div class="col-xs-2" id="type-filter-search">
            <p-dropdown [options]="displayedEntityTypes" filter="filter" (onChange)="onTypeChange($event.value)" placeholder="Type"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedEntityType']">

            </p-dropdown>
          </div>
         
          <div class="col-xs-2" id="profil-filter-search">
            <p-dropdown [options]="displayedEntityProfiles" filter="filter" (onChange)="onProfileChange($event.value)"  placeholder="Profil"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedEntityProfile']">
            </p-dropdown>
          </div>
     <br>
        <div class="row">
          <div class="col-xs-12">
            <button type="submit" class="btn btn-primary pull-right" id="submit-button-filter-search"><span class="glyphicon glyphicon-search"></span>search </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <br>
</div>

  onSubmit(searchFormValue): void {
    if (this.isValid(searchFormValue)) {
      if (searchFormValue === searchFormValue.SelectedEntity) {
      }
      // do something to display filter results 
    }

这些是下拉列表中显示的值：

ngOnInit(): void {
    this._userService.getEntities().subscribe(
      entities => {
        this.entities = entities;
        entities.forEach(entity => {
          if (this.entityTypes.filter(tp => tp.value === entity.type).length === 0) {
            this.entityTypes.push({ value: entity.type, label: entity.type });
            this.displayedEntityTypes.push({ value: entity.type, label: entity.type });
          }
          if (this.entityProfiles.filter(tp => tp.value === entity.profil).length === 0) {
            this.entityProfiles.push({ value: entity.profil, label: entity.profil });
            this.displayedEntityProfiles.push({ value: entity.profil, label: entity.profil });
          }

          this.entityCodes.push({ value: entity.code, label: entity.code });
          this.displayedEntityCodes.push({ value: entity.code, label: entity.code });
        });
      },
      err => {
        console.log(err);
      }
    );
  }

Answer 1

您应该将提交的过滤器值保存到组件公共变量中：

onSubmit(searchFormValue): void {
    if (this.isValid(searchFormValue)) {
      if (searchFormValue === searchFormValue.SelectedEntity) {
        this.submittedFilter = searchFormValue;
      } 
    }
}

然后，您可以在* ngFor元素

中显示实体

<div *ngFor="let myEntity of entities | myCustomFilter: submittedFilter"><div>

可以使用@Pipe注释定义'myCustomFilter'：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'myCustomFilter'})
export class MyCustomFilter implements PipeTransform {
  transform(entity: string, filter: string): number {
    // The behavior you are looking for
    // 'entity' can be a custom object
    return entity.includes(filter);
  }
}

修改

如果您想在代码中手动过滤数据，而不是在html中，您可以导入自定义管道并在方法中运行：

import { MyCustomFilter } from 'path/to/your/pipe'; constructor(private myCustomPipe: MyCustomFilter ) {} // Return your filtered entities from the pipe filterEntities() { return myCustomPipe.transform(this.entities, this.submittedFilter); }

然后，将方法绑定到输入值，如：

<p-table [value]="filterEntities()"> <p-table>

希望它会有所帮助：）

搜索结果使用angular 5 forEach？

1 个答案: