Angular 4搜索过滤器对象

Question

我有下面的代码

            <div class="doctor-content container-fluid">
                <div class="options">
                    <div class="filter col-md-8">
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Name" name="name" [(ngModel)]='doctorName'>
                        </mat-form-field>
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Clinic" name="clinicName" [(ngModel)]='clinicName'>
                        </mat-form-field>
                        <mat-form-field class="input-filter">
                            <input matInput placeholder="Specialization" name="specialization" [(ngModel)]='specialization'>
                        </mat-form-field>
                    </div>
                    <div class="doctor-list">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>First Name</th>
                                    <th>Email</th>
                                    <th>Clinic</th>
                                    <th>Specialization</th>
                                </tr> 
                            </thead>
                            <tbody>
                                <tr *ngFor='let list of doctors | filter:doctorName | filter:clinicName | filter:specialization| paginate: { itemsPerPage: 25, currentPage: p }'>
                                    <td class="doctor-image">
                                        <img src="../../assets/images/user_blue.png">
                                    </td>
                                    <td>{{list.firstName}} {{list.lastName}}</td>
                                    <td>&nbsp;</td>
                                    <td>{{list.clinics[0].name}}</td>
                                    <td>{{list.specializations[0].name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

搜索筛选器仅适用于firstName，而不适用于诊所名称和专门化名称。有人能帮我一下吗?我正在使用

"ng2-search-filter": "^0.3.1",

Answer 1

您必须根据需要编写自己的或更改ng2-search-filter，例如

HTML：

<tbody>
    <tr *ngFor='let list of doctors | filter: doctorName : clinicName : specialization | paginate: { itemsPerPage: 25, currentPage: p }'>
    <td class="doctor-image">
        <img src="../../assets/images/user_blue.png">
     </td>
    <td>{{list.firstName}} {{list.lastName}}</td>
    <td>&nbsp;</td>
    <td>{{list.clinics[0].name}}</td>
    <td>{{list.specializations[0].name}}</td>
    </tr>

管道：

    @Pipe({
  name: 'filter',
  pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {


  transform(items: any, args:string[]): any {
    if (!term || !items) return items;

    return Ng2SearchPipe.filter(items, args);
  }


  static filter(items: Array<{ [key: string]: any }>, args:string[]): Array<{ [key: string]: any }> {

    const toCompare1 = args[0].toLowerCase();
     const toCompare2 = args[1].toLowerCase();
      const toCompare3 = args[2].toLowerCase();

    return items.filter(function (item: any) {
      for (let property in item) {
        if (item[property] === null) {
          continue;
        }
        if (item[property].toString().toLowerCase().includes(toCompare1) || item[property].toString().toLowerCase().includes(toCompare2) || item[property].toString().toLowerCase().includes(toCompare3) ||  ) {
          return true;
        }
      }
      return false;
    });
  }
}

希望能有所帮助。