Passage d'un objet à un tuyau au lieu de touches dans Angular 2

Question

J'ai un filtre qui accepte un objet. Maintenant, dans mon 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> 

Voici ma méthode de transformation de tuyaux

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; 
} 
} 

Maintenant, mon filtre accepte un objet. Cela n'obtient jamais de coups à la pipe. S'il vous plaît me suggérer. Comment dois-je passer un objet de mon HTML à un tuyau.

Answer 1

Un petit exemple en ce qui concerne Pipes comment passer des objets

Modèle

<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())); 
    } 
    } 

Ce tuyau filtre le tableau en prenant la valeur de la Barre de recherche.

Vous pouvez trouver ce Live ici LINK.

Plus sur Pipes LINK