Angular 4过滤器搜索自定义管道

4 回答

• 0

  我必须在我的本地实现搜索功能，这里更新了你的代码 . 请这样做 .

  这是我必须更新的代码 .

  directory Structure

  app/
     _pipe/
          search/
            search.pipe.ts
            search.pipe.spec.ts
  app/ 
     app.component.css
     app.component.html
     app.component.ts
     app.module.ts
     app.component.spec.ts
  

  command run for creating pipe

  ng g pipe search
  

  component.html

  <input type="text" class="form-control" placeholder="Search" [(ngModel)]="query" id="listSearch">
      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
      <input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
      <label [for]="lock.ID" class="check-label"></label>
      <h3 class="card-text name">{{lock.User}}</h3>
      <h3 class="card-text auth">{{lock.AuthID}}</h3>
      <h3 class="card-text form">{{lock.FormName}}</h3>
      <h3 class="card-text win">{{lock.WinHandle}}</h3>
  </div>
  

  component.js

  注意：在此文件中，我必须使用虚拟记录进行实现和测试 .

  import { Component, OnInit } from '@angular/core';
  import { FormsModule }   from '@angular/forms';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
      export class AppComponent implements OnInit{
      public search:any = '';
      locked: any[] = [];
  
      constructor(){}
  
      ngOnInit(){
          this.locked = [
              {ID: 1, User: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'},
              {ID: 2, User: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'},
              {ID: 3, User: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'},
              {ID: 4, User: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'},
          ]
      }
  }
  

  module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule }   from '@angular/forms';
  import { AppComponent } from './app.component';
  import { SearchPipe } from './_pipe/search/search.pipe';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      SearchPipe
    ],
    imports: [
      BrowserModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  pipe.ts

  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
      name: 'LockFilter'
  })
  
  export class SearchPipe implements PipeTransform {
      transform(value: any, args?: any): any {
  
          if(!value)return null;
          if(!args)return value;
  
          args = args.toLowerCase();
  
          return value.filter(function(item){
              return JSON.stringify(item).toLowerCase().includes(args);
          });
      }
  }
  

  我希望你能获得管道功能，这将对你有所帮助 .

  回复于 2024-04-20T08:47:03+08:00
• 9

  Angular 2的简单filterPipe

  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'filter'
  })
  export class filterPipe implements PipeTransform {
  
    transform(items: any[], field:string, value: string): any[] {
  
      if(!items) return [];
      if(!value) return items;
  
  
      return items.filter( str => {
            return str[field].toLowerCase().includes(value.toLowerCase());
          });
     }
  }
  

  这是HTML

  <input type="text" class="form-control" placeholder="Search" id="listSearch" #search>
      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | filter:'propName': search.value>
      <input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
      <label [for]="lock.ID" class="check-label"></label>
      <h3 class="card-text name">{{lock.User}}</h3>
      <h3 class="card-text auth">{{lock.AuthID}}</h3>
      <h3 class="card-text form">{{lock.FormName}}</h3>
      <h3 class="card-text win">{{lock.WinHandle}}</h3>
  </div>
  

  在HTML中 PropName 是虚拟文本 . 代替 PropName 使用您的任何对象属性键 .

  回复于 2024-04-20T08:47:03+08:00
• -1

  以下是创建自定义管道的简单说明 . 可用管道不支持它 . 我找到了这个解决方案here ..很好地解释了它

  创建管道文件advanced-filter.pipe

  import {Pipe, PipeTransform} from '@angular/core';
  
  @Pipe({
    name: 'advancedFilters'
  })
  
  export class AdvancedFilterPipe implements PipeTransform {
  
    transform(array: any[], ...args): any {
      if (array == null) {
        return null;
      }
  
      return array.filter(function(obj) {
        if (args[1]) {
          return obj.status === args[0];
        }
        return array;
      });
  
    }
  
  }
  

  这里，array - 将数据数组传递给你的自定义管道obj--将使用该对象作为数据对象，你可以添加条件来过滤数据

  我们添加了条件 obj.status === args[0] ，以便数据将获取在.html文件中传递的状态的过滤器

  现在，在组件的module.ts文件中导入并声明自定义管道：

  import {AdvancedFilterPipe} from './basic-filter.pipe';
  
  //Declare pipe
  
  @NgModule({
  
      imports: [DataTableModule, HttpModule, CommonModule, FormsModule, ChartModule, RouterModule],
  
      declarations: [ DashboardComponent, AdvancedFilterPipe],
  
      exports: [ DashboardComponent ],
  
      providers: [{provide: HighchartsStatic}]
  
  })
  

  在.html文件中使用创建的自定义角度管道

  <table class="table table-bordered" [mfData]="data | advancedFilters: status" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
  
                  <thead>
                         <tr>
                               <th class="sortable-column" width="12%">
                                   <mfDefaultSorter by="inquiry_originator">Origin</mfDefaultSorter>
                               </th>
                          </tr>
                  </thead>
  
                  <tbody class="dashboard-grid">
  
                                  <ng-container *ngFor="let item of mf.data; let counter = index;">
  
                                                  <tr class="data-row {{ item.status }} grid-panel-class-{{ counter }}">                                      
  
                                                                  <td class="align-center">{{ item.trn_date }}</td>
  
                                                                  <td>{{ item.trn_ref }}</td>
  
                                                  </tr>
  
                  </tbody>
  
  </table>
  
  
  //If you are using *ngFor and want to use custom angular pipe then below is code
  
  <li *ngFor="let num of (numbers | advancedFilters: status">
    {{ num | ordinal }}
  </li>
  

  回复于 2024-04-20T08:47:03+08:00
• 0

  You can use the given function instead on the (input) event of your input box

  filterNames(event)
  {
   this.names_list = this.names_list.filter(function(tag) {
   return tag.name.toLowerCase().indexOf(event.target.value.toLowerCase()) >= 0;
   });
  }
  

  希望能帮助到你..

  回复于 2024-04-20T08:47:03+08:00