將對象傳遞給Pipe而不是Angular 2中的鍵

Question

我有一個接受對象的過濾器。現在，在我的HTML

<div class="col-lg-12" *ngIf="subUserDetailsList"> 
     <table class="table table-striped" [mfData]="subUserDetailsList" #mf="mfDataTable" [mfRowsOnPage]="5"> 
     <thead> 
      <tr> 
      <th><input name="" type="checkbox" value=""></th> 
      <th> 
       <mfDefaultSorter by="name">Name</mfDefaultSorter> 
      </th> 
      <th> 
       <mfDefaultSorter by="email">Email</mfDefaultSorter> 
      </th> 
      <th> 
       <mfDefaultSorter by="age">Role Name</mfDefaultSorter> 
      </th> 
      <th> 
       <mfDefaultSorter by="city">Actions</mfDefaultSorter> 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- <tr class="card-block" *ngFor="let subUser of mf.data | genericFilter: name"> -->    //This works when model of the above textbox is name. However my idea is to pass an object. 
       <tr class="card-block" *ngFor="let subUser of (mf.data | genericFilter:filterArgs.first_name)"> 
      <td><input name="" type="checkbox" value="{{subUser.id}}"></td> 
      <td>{{subUser.full_name}}</td> 
      <td>{{subUser.email}}</td> 
      <td>{{subUser.role.role_name}}</td> 
      <td><a href="{{subUser.id}}" data-toggle="modal" data-target="#role">Edit, Delete</a></td> 
      </tr> 
     </tbody> 
    </table> 

這裏是我管的變換方法

transform(list: any[], obj: {}) {  
    let result:any; 
    let filter = obj ? obj : null; 
    if (filter && Array.isArray(list)) { 
     let filterKeys = Object.keys(filter); 
     result= list.filter(item => 
      filterKeys.reduce((isExist, keyName) => 
       isExist && item[keyName].toString().indexOf(filter[keyName].toString()) !== -1, true     
      ) 
     ); 
    } 
    else { 
     return list; 
    } 
    return result; 
} 
} 

現在我的過濾器接受的對象。這從來沒有得到命中的管道。請建議我。我應該如何將一個對象從我的html傳遞給管道。

Answer 1

一個小例子關於管道如何傳遞對象

模板

<div class="row gap"> 
     <div class="col l3 offset-l9 m4 offset-m8 s4 offset-s8"> 
      <input class = "browser-default" type="search" placeholder="Search" #input> // getting the input in a local variable and passing it to the filter 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col l4 m6 s12" *ngFor = "let competition of competitions | filterComp:input.value" (click) = "onSubmit(competition)"> 
      <div class="box"> 
       <p class="bigger"><b> {{competition.caption}}</b></p><hr> 
       <p><b>League :</b> {{competition.league}}<br/> 
       <b>Year :</b> {{competition.year}}<br/> 
       <b>No of Teams :</b> {{competition.numberOfTeams}}<br/> 
       <b>No of Games :</b> {{competition.numberOfGames}}<br/> 
       <b>Current Match Day :</b> {{competition.currentMatchday}}<br/></p> 
      </div> 
     </div> 
    </div> 

PIPE

@Pipe({ 
    name: 'filterComp' 
}) 
export class CompetitionFilterPipe implements PipeTransform { 

    transform(value: any, filter?: string): any { 
    if (!filter) { 
     return value; 
    }else{ 
     return value.filter((data) => data.caption.toLowerCase().includes(filter.toLowerCase())); 
    } 
    } 

此管道過濾器陣列取入的值搜索框。

你可以在這裏找到它住在這裏LINK。

更多關於管道LINK