Question

我无法按照我的要求过滤记录。我想要的是点击全部不应该应用过滤器。点击其他选项应该应用过滤器。

HTML

<div class="container " style="padding-top:100px">
     <div class="row">
      <div class="input-group">
        <div class="input-group-btn">
          <!-- <label for="manageType">All</label> -->
          <select [(ngModel)]="mType" name="manageTypejj" id="manageType" class="form-control">

                 <option *ngFor="let type of manageType;" [ngValue]="type.mapping"   >{{type.name}} </option>

           </select>
        </div>
        <input type="text" class="form-control" [(ngModel)]="search" />

        <div class="input-group-btn">
          <button class="btn btn-info" (click)="manageTypeFilter(projects,search,mType)">
           <i class="fa fa-search" aria-hidden="true"></i>
           </button>
        </div>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>SL</th>
          <th>Ref</th>
          <th>Project Name</th>
          <th>Product Owner</th>
          <th>Project Type</th>
          <th>Remaining Days</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let project of projects  ;let ndx = index" >
          <td>{{ndx+1}}</td>
          <td>{{project.ref}}</td>
          <td>{{project.projectName}}</td>
          <td>{{project.productOwner}}</td>
          <td>{{project.projectType}}</td>
          <td>{{project.days}}</td>
          <td>{{project.status}}</td>
        </tr>
       </tbody>
    </table>
  </div>

这是管道代码

PIPE.TS

@Pipe({
  name: 'manageMyProjectPipe',
  pure: false
})
export class ManageMyProjectPipePipe implements PipeTransform {

  transform(projeccts: ManageProject[], filter?: string,dropdown?:any): any {
  console.log("filter>>>"+ filter);
  console.log("dropdown>>>"+ dropdown);
  console.log("dropdown json>>>"+ JSON.stringify(dropdown));

      if( !filter || (filter && dropdown== 'All' )  ){
     //      console.log("Returning full array");
          return projeccts;
        }

        if(dropdown && filter )
          return  projeccts.filter(mtype=>mtype[dropdown].toUpperCase().indexOf(filter.toUpperCase())!==-1)
        else 
          return null;
        // return null;  


  }

}

这是单击为处理管道定义的按钮代码

管理-PROJECT.TS

 manageTypeFilter(projects,search,mType){

   console.log("projects"+this.projects);
   console.log("search "+search);
   console.log("mType "+mType);

   if(mType !== 'All'){
         let managePipe = new ManageMyProjectPipePipe();
        this.projects = managePipe.transform(projects,search,mType);

   }
   else{
         this.projects = this.projects2;
   }

 }

你能否告诉我过滤哪里出错了。这是正确的做法。请建议。

Answer 1

我删除了Pipe，因为我没有直接使用Pipe并在TS文件中编码如下。

  manageTypeFilter(projects, filter, dropdown) {

    if (dropdown !== 'All' && filter) {
      console.log("comes inside filter");
      this.projects = this.projects2.filter(mtype => mtype[dropdown].toUpperCase().indexOf(filter.toUpperCase()) !== -1)
    }
    else if (dropdown === 'All' || (dropdown !== 'All' && filter === '')) {
      console.log("Comes inside returning all records");
      this.projects = this.projects2;
    }

  }

单击Button时无法使用管道过滤记录

1 个答案: