角度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