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>

这是我的Pipe的变换方法

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

关于Pipes如何传递对象的一个小例子

<强>模板

<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({
  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

Answer 2

我有一个类似的问题。您必须通过以下方式显式地传递过滤器对象：

<div *ngFor="let item of itemsArray | yourFilterPipe: { 
  filterProperty1: yourFilterObj.filterProperty1, 
  filterProperty2: yourFilterObj.filterProperty2
}">
  <!-- display whatever you want-->
</div>

否则，管道不会更新要过滤的特定属性。这很丑，但是对我有用。

将对象传递给管道而不是Angular 2中的键

2 个答案: