Angular 将对象传递到管道而不是角度2中的关键帧

我有一个接受对象的过滤器。现在在我的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>

---

现在我的过滤器接受一个对象。这永远不会被击中管道。请推荐我。如何将对象从html传递到管道。

关于管道如何传递对象的一个小示例

模板

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

此管道过滤从搜索框中获取值的数组

你可以在这里找到这个

---

关于管道的更多信息

我也有类似的问题。必须按以下方式显式传递筛选器对象：

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

---

否则，管道不会更新要过滤的特定特性。这很难看，但对我来说很管用。

你说的“这永远不会击中管道”是指“永远”还是指“只有一次”，但在修改对象属性时不会再出现？@GünterZöchbauer我对这一点还不熟悉，我的想法基本上是创建一个通用过滤器，我试着这样做。请建议我，如果这不工作，如果你使你的管道不纯，它应该没有这个讨厌的对象属性重写工作。

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

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